CSS学习笔记：box-shadow

在CSS3中，box-shadow属性实现盒容器的阴影效果，几乎可以用到任何元素上。

兼容性：IE9

如果元素同时设置了border-radius，阴影也会有圆角效果。

在该属性中，要设置阴影相对于盒容器水平及垂直方向上的偏移值、阴影的颜色、还可以选择性地设置模糊半径和扩展半径。

语法

box-shadow：none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

• inset：默认阴影是在边框外，使用inset后，阴影在边框内（即使是透明边框），背景之上内容之下。
• offset-x，offset-y：这是头两个length值，用于设置阴影偏移量。
  
  • offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。
  • offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。

如果两者都是0，那么阴影位于元素后面。这时如果设置了blur-radius 或spread-radius则有模糊效果。

• blur-radius：这是第三个length值，表示模糊半径。值越大，模糊面积越大，阴影就越大越淡。
  不能为负值。
  默认为0，此时阴影边缘锐利。
• spread-radius：这是第四个 length 值，表示扩展半径。取正值时，阴影扩大；取负值时，阴影收缩。
  默认为0，此时阴影与元素同样大。

• color：阴影颜色

• 可以设置多个阴影效果，用逗号分隔。它们依次层叠在一起，首先被声明的阴影位于最上方。

例子

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 10px 20px 10px 3px rgba(0,0,0,0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 10px 20px gold;

box-shadow: inset 0 0 10px 2px red;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

用途

除了为盒容器实现基本的阴影之外，还可以用于以下场景：

• 发光效果
  不设置偏移，并可以选择性的设置一个正数值的扩展半径

box-shadow:  0 0 10px 2px gold;

• 为盒容器模拟多层边框
  使用多组box-shadow值，并将模糊半径设为0以有清晰的边界。

box-shadow: 0 0 0 10px gold, 0 0 0 20px green, 0 0 0 30px red;