CSS3 圆角阴影

2015年11月23日

今天要介绍的是一些可以用 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 )。