CSS3 圆角阴影

到 B 站观看视频

今天要介绍的是一些可以用 CSS 实现的静态效果，在这些 CSS 新属性发明之前，人们通常都是用图片的形式来展示这些效果，改动起来非常不方便，也影响加载速度。

注意：很多人把这些 CSS 新属性统称为 CSS3 。

阴影

box-shadow （ 中文参考）属性可以用来给一个元素加上阴影。

大致的书写规则如下：

box-shadow: 10px 5px 5px black;

具体上面每一个值发挥的作用，建议不用死记。只需到 chrome 开发者工具中，自己调整一下每个值，看看阴影的变化，就一目了然了。具体操作方式见视频中。

圆角

border-radius （ MDN ）用来给元素设置圆角。radius 就是咱们中小学数学中常用的那个 r 的全写，意思就是“半径”。border 是边框的意思。border-radius 用来规定边框的四个角有多圆。

书写规则：

border-radius: 1px 0 3px 4px;

四个值分别对应四个角。也可以写成

border-radius: 3px;

那就是把四个角设置为一个统一值。

厂商前缀 vendor prefix

网上搜一下会发现很多网站都会有自动圆角或者阴影生成器，例如 http://www.cssmatic.com/border-radius 。

但是，我们会发现生成的代码中有很多，类似 -webkit- ，-o- ，-ms- 等等这样的前缀。这个叫做“厂商前缀”（ vendor prefix ），如果不加，可能个别厂商的浏览器中就不生效了。但是是不是每个属性都要加上所有的前缀才行，也不一定，而且随着时间推移，添加规则都会变化。

总之，厂商前缀规则非常复杂。但是好在我们自己是不需要记住的，实际写代码的时候，我们只需要写没有前缀的那个版本（例如 box-shadow ），后续可以使用 autoprefixer 帮助我们自动加上需要的前缀（ autoprefixer 是有非常活跃的社区再维护的，所以是目前加厂商前缀最靠谱的解决方案，没有之一）。

总结

好今天先聊静态效果的这些属性，回头聊动态效果的（ 例如 transition ）。