CSS小课堂之阴影

box-shadow 以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius，阴影也会有圆角效果。

语法

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

1. inset
   加上 inset 表示阴影在边框内。
2. <offset-x> <offset-y>
   阴影在 x 轴和 y 轴的偏移量。x 轴为正值表示向右，y 轴为正值表示向下。
3. <blur-radius>
   模糊半径，值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。
4. <spread-radius>
   扩散半径，取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
5. <color>
   颜色。

举例

1. 普通青年
   一个最简单的例子。

   /* <offset-x> | <offset-y> | <color> */
   box-shadow: 60px 16px #ddd;

   
   simplest

2. 近视青年
   模糊的阴影。骚年，你近视了。

   /* <offset-x> | <offset-y> | <blur-radius> | <color> */
   box-shadow: 60px 16px 5px #ddd;

   
   blur-radius

3. 肥胖青年
   可以看出，圆角放大了，说明该青年被岁月磨平了棱角。

   /* <offset-x> | <offset-y> | <blur-radius> | <spread-radius> | <color> */
   box-shadow: 60px 16px 0 10px #ddd;

   
   spread-radius

4. 内敛青年
   阴影出现在元素内部。

   /* inset | <offset-x> | <offset-y> | <color> */
   box-shadow: inset 60px 16px #ddd;

   
   inset

5. 富有青年
   使用逗号来分割多个阴影。

   /* <shadow>, <shadow> */
   box-shadow: 30px 16px #ddd, 60px 32px #eee;

   
   multiple shadows

6. 弥散阴影
   制作简单的弥散阴影。模糊半径应尽量大，扩展半径比元素稍小。调出来的效果还是要看个人审美的（蜜汁自信）。

   box-shadow: 0 20px 20px -10px rgba(18, 148, 246, .4);

   
   diffuse

7. 加载中
   利用多阴影的特性，我们可以只使用一个元素和多个阴影来组合出有意思的东西，例如加载中的小姐姐，噢不，是小点点。

   box-shadow:
    30px 0 rgba(18, 148, 246, .8),
    60px 0 rgba(18, 148, 246, .6),
    90px 0 rgba(18, 148, 246, .4),
    120px 0 rgba(18, 148, 246, .2);

   
   loading

兼容性

参考

• 文静的ppt
• MDN：developer.mozilla.org/en-US/docs/…
• Codepen：codepen.io/binbin/pen/…