CSS3box-shadow

css

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的话用逗号隔开，渲染时先指定的阴影在上面，重叠部分的阴影效果会叠加,比如四个边阴影不一样，则用四个列表来渲染。

介绍一些小工具,等等;