天在写一个点亮灯泡的小项目的时刻，用到了box-shadow属性。感受这个属性挺有意思的，索性专门整理一下。

一. box-shadow的界说和语法

界说：box-shadow是css3新增的一个属性。在W3School里，界说box-shadow是向框添加一个或者多个阴影的属性。 语法：box-shadow: h-shadow v-shadow blur spread color inset.  h-shadow: 阴影的水平位置 v-shadow：阴影的垂直位置 blur：阴影的模糊半径 spread：阴影的半径 color：阴影的颜色 inset：将外部阴影改成内部阴影【outset反过来】 凭据box-shadow的界说，我们可以为一个框设置一个阴影，也可以设置多个阴影。

当我们需要设置多个阴影时，中心需要将每个阴影用逗号离隔。

举个例子：

/*html代码*/ 
<div class="20b2-833a-bbc9-218e test"></div>

/*对应的css代码*/ 
.test{ 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin: 100px auto; 
  border-radius: 50%; 
  box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5) 
} 

这里我们用border-radius属性设置了一个圆形，而且为这个圆形添加了一个浅黄色阴影和一个白色的阴影。

以之一个阴影：box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5)为例：

这段代码示意阴影的水平位置为右移10px；

垂直位置为下移10px；

第三个10px代表阴影的模糊水平blur，我们也将它设置成20px；

第四个10px是阴影半径的意思；最后一个划定了阴影的颜色为rgba(255,255,0,0.5)。

也就是说，我们为class为test的div米素添加了一个偏离框，而且向右距离为10px、向下距离为10px、模糊半径为10px、阴影半径为10px的浅黄色的阴影。

凭据上面的CSS代码，我们看一下同时设置了两个阴影的效果：

为了更直白地观察到上述阴影设置的效果，我们将第二个阴影删除，只保留之一个阴影：

效果是不是还不错？

二. box-shadow属性值的详细剖析

凭据前面的语法规则，box-shadow可以有六个值。接下来我们来聊一聊box-shadow属性里的每个值都怎么用

1. h-shadow【必须】

这个值代表的是阴影在x轴上的阴影位置。可以是负值。

当它为正值的时刻示意向右位移一定的距离【泛起在米素的右边】，负值示意向左位移【泛起在米素的左边】。这个距离的单米可以是px、em或者rem；

需要注重的是：h-shadow是必须的，不能省略！

box-shadow: 10px 0px 10px rgba(0,0,0,0.9) /*阴影泛起在米素的右侧*/

box-shadow: -10px 0px 10px rgba(0,0,0,0.9) /*阴影泛起在米素的左侧*/

2. v-shadow【必须】

这个值示意阴影在y轴上的位置。也可以是负值。

当值为负的时刻示意向上偏移一定的距离【泛起在米素的上方】；值为正的时刻示意向下偏移一定的距离【泛起的米素的下方】

box-shadow: 0px -20px 10px rgba(0,0,0,0.9)/*阴影泛起在米素上方*/ 

box-shadow: 0px 20px 10px rgba(0,0,0,0.9)/*阴影泛起在米素下方*/

3. blur【可选】

blur指的是阴影的模糊半径。这个值使得阴影部门的过渡看起来更柔和。我们可以试一试差别blur值对阴影效果的影响：

box-shadow: 10px 10px 5px rgba(0,0,0,0.9) /*blur值为5px*/ 

box-shadow: 10px 10px 10px rgba(0,0,0,0.9)/*blur值为10px*/

box-shadow: 10px 10px 15px rgba(0,0,0,0.9)/*blur值为15px*/ 

将blur值为5px、10px、15px 的效果图依次从左往右排列，可以看出来随着模糊半径数值的增大，阴影的模糊水平越高。

4. spread【可选】

spread示意的是阴影的半径。我在网上看到有人对spread和blur的区别发出疑问，实在很简单：blur用于形貌模糊半径，它的值决议了阴影的模糊水平；而spread是示意阴影所占区域的巨细，这是两个差别的观点。

我们来试试其他属性值相同的情况下，spread差别时阴影的显示：

box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9);/*阴影半径为5px*/ 
box-shadow: 10px 10px 10px 15px rgba(0,0,0,0.9);/*阴影半径为15px*/ 
box-shadow: 10px 10px 10px 25px rgba(0,0,0,0.9);/*阴影半径为25px*/ 

将spread的值为5px、15px、25px的效果图依次 从左向右排列，很明显阴影在逐渐变大

5. color【可选】

阴影的颜色可以用任何颜色单米来示意。当我们没有设置color值的时刻，默认就是玄色。

box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9);/*玄色阴影，用rgba示意，透明度为0.9*/ 

box-shadow: 10px 10px 10px 5px rgb(255,0,0);/*红色阴影，用rgb示意*/ 

box-shadow: 10px 10px 10px 5px #afe;/*浅蓝色阴影，用十六进制颜色示意法*/ 

box-shadow: 10px 10px 10px 5px blue;/*蓝色阴影，用颜色单词示意*/

6. inset 【可选】

默认情况下，我们设置的阴影都是外部阴影，而这个属性值的作用是将外部阴影转换成内部阴影。

box-shadow: 10px 10px 10px 5px blue; /*默以为外部阴影*/ 

box-shadow: 10px 10px 10px 5px blue inset;/*将外部阴影切换为内部阴影*/

7. 一些有趣的实践

领会了box-shadow之后，我们可以用来做一些有趣的事情。好比给阴影添加动画，对米素添加：hover伪米素，形成鼠标悬浮在米素上时，阴影扩大的效果

.test{ 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin: 100px auto; 
  border-radius: 50%; 
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.9); 
  transform: scale(1); 
  transition: box-shadow 0.6s, transform 0.5s; 
}

.test:hover{
	width: 100px;
	height: 100px;
	background: yellow;
	margin: 100px auto;
	border-radius: 50%;
	box-shadow: 0px 0px 50px 15px rgba(0,0,0,0.9);
	transition: box-shadow 0.5s;
}

怎么样，box-shadow属性是不是挺有意思的？

好了，今天关于边框阴影box-shadow 属性的总结就写到这里了。鉴于刚刚做上面这个鼠标悬浮效果的时刻用到了CSS3的另外两个新属性transition和transform，我计划下次来写一些这两个属性。

原文来自：https://my.oschina.net/u/4188243/blog/3092621