css3样式兼容,浏览器css3兼容

原生JS设置CSS3样式时，怎么添加兼容性前缀（

可以使用 setProperty

创新互联专注于闽清企业网站建设,响应式网站设计,商城网站制作。闽清网站建设公司,为闽清等地区提供建站服务。全流程定制网站建设，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

element.style.setProperty( '-webkit-transition', 'left 5s linear' );

也可以

element.style.webkitTransform = ''

目前，对CSS3支持日趋完善，实现兼容性的渐变背景效果是完全可以的，让背景渐变与背景图片共存的方法很简单，主要要注意的是图片要保持“最小单元”的准则，选择正确的浏览器，该问题就能得到解决，下面介绍一下具体的解决方法。

1、图片渐变切图时一定要以最小为准则，例如在做垂直方向的纯颜色的渐变时，尝试使用1个像素的竖直图片作为渐变背景“最小单元”。另外，要注意css3虽然支持很多的浏览器的兼容，但是目前不支持Opera浏览器。

2、如果兼容程度允许的话，纯色渐变背景可以使用css3的渐变样式，如{background: linear-gradient(left top, red , blue);}，如此一来能够减少切图量，还可以加快网页加载速度，缺点是使用主流浏览器的话，就必须要添加前缀。

3、注意对于webkit核心的浏览器，如Chrome/Safari浏览器，在这些浏览器下要做到渐变背景，也需要使用CSS3 渐变方法，css-gradient，具体就是-webkit-gradient，使用语Firefox浏览器业是有一点差异的。

都是网页样式code，不同的在于css3比css多了一些样式设置而已。

css3是向前兼容的，也就是说，css中有效的code在css3也有效。

以上是纯code方面来看，而对于具体的显示效果，还要看浏览器对其的支持情况。

举2个简单的例子：

一、一个css与css3都有效的code，如果浏览器不支持css3，那么只会以css的样式显示。最常见的就是圆弧角。

二、一个只在css3中有效的code，如果浏览器不支持css3，那么其显示效果就不会出现。

css3和css，在编写code的时候，除了对一些css3中新出现的属性设置，其它完全一样。

一些属性可以通过添加-ms-前缀

但对于更低版本的浏览器，有些样式是不能支持的

所以一般对过低版本的浏览器直接降级处理，不显示相关的样式

现在很多浏览器都支持css3属性，只不要不是ie9以下的浏览器就可以，如果你真的要知道怎么兼容，那你可以了解每个浏览器的内核。

名称栏目：css3样式兼容,浏览器css3兼容
URL网址：http://6mz.cn/article/dsddjii.html