CSS投影 box-shadow

先看一个例子

box-shadow: 2px 3px 4px rgba(0,0,0,.5);

(1) 以该元素相同的尺寸1和位置，画一个rgba(0,0,0,.5) 的矩形。（之后称这个矩形为盒子）

(2) 把它向右移2px，向下移3px。

(3) 使用高斯模糊算法（或类似算法）将它进行4px 的模糊处理。这在

本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模

糊半径的两倍（比如在这里是8px）。

(4) 接下来，模糊后的矩形与原始元素的交集部分会被切除掉，因此它

看起来像是在该元素的“后面”。实际上没有任何投影绘制在元素的下层。

 

box-shadow: offset-x offset-y blur spread color inset;

参数解释：

offset-x：必需，取值正负都可。offset-x水平阴影的位置。

offset-y：必需，取值正负都可。offset-y垂直阴影的位置。

Blur（模糊半径）:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。

Spread（扩张半径）：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。

color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。

inset:可选。将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。

 

模糊半径与扩张半径的区别

扩张半径会根据你指定的值去扩大或（当指定负值时）缩小投影的尺寸，通俗点讲就是增大（缩小）盒子大小。

                         

几种投影实现

单侧投影

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

 

 

应用一个负的扩张半径，值刚好等于模糊半径，那么投影的尺寸就会与投影所属元素的尺寸完全一致，形成单侧投影

邻边投影

box-shadow: 3px 3px 6px -3px black;

 

这和举例中的投影有什么区别：举例中阴影由两部分组成1、偏移产生的盒子 2、阴影

此投影只由阴影组成。如果偏移值增大举例中投影就会非常难看。

邻边投影实现：

应用一个负的扩张半径，值刚好等于模糊半径一半

水平垂直偏移量小于模糊半径一半以保证盒子被‘藏起来’

 

双侧投影

box-shadow: 5px 0 5px -5px black,

-5px 0 5px -5px black;

实现方式是使用两个单侧投影