CSS3 浏览器支持参考手册
CSS3浏览器支持参考手册
CSS3作为前端开发中的一个重要技术，为网站的样式提供了更为多样化的选择。此手册就主要列出了CSS3浏览器的支持情况。
浏览器支持度
对于CSS3的支持早期的浏览器是比较有限的。而到现在，绝大多数的网页浏览器都已经可以对包括 CSS3在内的 HTML5 技术进行支持，不过各浏览器之间的支持度差异还是存在的。
支持度等级
不同的CSS3属性浏览器的支持度是各有差异的，因此我们将其分为3个等级来区分浏览器的支持情况。
- Y （Yes，即支持级别）：表示浏览器支持此属性。
- P （Partial/Partly，即部分支持）：表示浏览器部分支持此属性。
- N （No，即不支持）：表示浏览器不支持此属性。
常用浏览器支持情况
以下是一些常用浏览器对CSS3属性支持情况的简略表述：
| 属性 / 浏览器 | Chrome | Firefox | Safari | Opera | IE / Edge |
|---|---|---|---|---|---|
| border-radius | Y | Y | Y | Y | P |
| box-shadow | Y | Y | Y | Y | Y |
| text-shadow | Y | Y | Y | Y | P |
| transition | Y | Y | Y | Y | N |
| transform | Y | Y | Y | Y | P |
| animation | Y | Y | Y | Y | P |
| flexbox | Y | Y | Y | Y | P |
| grid | Y | Y | Y | Y | Y |
浏览器前缀
在CSS3的早期版本，由于各浏览器对某些CSS3属性的支持情况不同，为了区分不同浏览器的属性，就出现了浏览器前缀的概念。
浏览器前缀（Vendor Prefix）是一段可以添加到CSS属性前面的代码，用以表示此属性的兼容性支持情况。不同浏览器会使用不同的前缀，如下表所示。
| 浏览器前缀 | 浏览器 |
|---|---|
| -moz- | Firefox |
| -webkit- | Safari |
| -o- | Opera |
| -ms- | IE/Edge |
以Webkit浏览器为例，为了实现圆角效果，我们可以使用下列代码：
/* Webkit的圆角属性 */
-webkit-border-radius: 5px;
总结
CSS3是一个非常重要的前端开发技术，各浏览器对其属性的兼容性也在不断发展过程中不断的得到加强。虽然有很多CSS3属性在不同的浏览器之间表现有所不同，但开发者的目标应该是实现对尽量多人群的兼容性，建议根据实际情况选择使用相应的前缀或者其他方案来解决兼容性问题，保证使用者的体验并减少浏览器兼容性问题所带来的负面影响。