CSS3box-shadow

What the FUCK is box-shadow

box-shadow属性用来指定元素的阴影效果,用一个逗号隔开的值列表来描述。

<shadow> = inset? && <length>{2,4} && <color>?

栗子:

1
box-shadow: inset 2px 2px 2px 2px black;

以上栗介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
inset:
默认该值为未指定的。在未指定时,阴影效果为像外部投影,即元素内部是不出现阴影效果的。当用inset关键字指定时,阴影效果为向内投影,即元素外部是不出现阴影效果的,此时阴影覆盖background上面,但是在content内容下面。
<offset-x> <offset-y>(第一、二个length值):
第一、二个length值代表阴影在水平和垂直方向上的偏移量(可以理解为延伸量)。可以为负值,负值即向左/向上偏移。常用单位可以为px,em,rem等等,具体请查阅MDN大法。
<blur-radius>(第三个length值):
第三个length值代表阴影模糊的范围,值越大,模糊的范围越大,不可以为负值,负值是将没有阴影效果。默认值为0;
<spread-radius>(第四个length值)
第四个length值代表阴影扩大的范围,和blur-radius值唯一区别是效果不同,范围变化是一样的,负值跟0效果是一样的
color:
设置阴影颜色。配合颜色

  • box-shadow本身不占位置,不会影响布局,还在原来的位置。只是相当于copy一份目标元素(像影子),然后通过offset-x/y设置相对于原位置的偏移,<spread-radius>改变了影子的大小,<blur-radius>改变模糊度的大小。

  • 设置多个box-shadow的话用逗号隔开,渲染时先指定的阴影在上面,重叠部分的阴影效果会叠加,比如四个边阴影不一样,则用四个列表来渲染。

介绍一些小工具,等等;