box-shadow学习笔记整理

box-shadow不用多说，大家都知道是给元素设置阴影的，但是使用过程中有很多有意思的技巧。

定义

box-shadow是以逗号分隔列表来描述一个或者多个阴影效果。同时如果设置了border-radius，阴影同样对圆角生效。如果同时设置了多个阴影，那么第一个在最上面，以此类推。

初始值：none
适用于所有元素，包括伪类
继承性：无

语法

box-shadow：inset? <offset-X> <offset-Y> <blur-radius> <spread-radius> <color>
                                   \可以不设置/     \可以不设置/

• inset: 默认阴影在边框外，使用inset后，阴影在边框内，背景之上内容之下
• <offset-X> <offset-Y> : 设置阴影的水平偏移量（负值位于元素左边）和垂直偏移量（负值位于元素上边），<length>值。
  如果两者都是0，那么阴影位于元素的后面。如果设置了blur-radius或者spread-radius，则有阴影效果。
• blur-radius: <length>，值越大，模糊面积越大，阴影越大越淡。不能为负值，默认为0，此时阴影边缘表现为锐利。
• spread-radius <length>，取正，阴影扩大；取负，阴影缩小。默认为0，此时阴影与元素一样大。
• <color>：阴影颜色，可以是各种颜色表达，rgb()/rgba()/hsl()/hsla()/hex-color/named-color/currentColor/deprecated-system-color

兼容性

chrome	IE	firefox	safari	opera	android	IOS
10.0+支持-webkit前缀,经测试，63.0支持无前缀	9.0+	3.5/4.0+支持-moz-前缀，经测试59.0.3支持无前缀	3.0支持-webkit-前缀，5.1+支持无前缀	10.5+	支持-webkit-前缀	支持-webkit-前缀，经测试，7.0支持无前缀

示例：实现单独一侧投影

注：利用扩张半径缩小投影的尺寸

box-shadow: 0 5px 4px -4px red;

示例：实现邻边投影

注：设置扩张半径时，值不应该是模糊半径的相反值，只需要把阴影藏进一侧，另一侧自然露出就好。

box-shadow: 4px 4px 8px -4px red;

示例：实现双侧投影

注：因为扩张半径在四个方向的作用是均等的，因此我们无法一次性完成，只能分成两块来实现。

box-shadow: 0 4px 4px -4px red,
            0 -4px 4px -4px red;

示例：盒子投影

可以制作盒子投影等类似的效果，此处只是粗略示意，有点丑*^_^*

box-shadow: 4px 4px 8px -2px #0fb8eb,
            4px 4px #046380,
            10px 10px 20px 0 rgba(0,0,0,0.8);