天在写一个点亮灯泡的小项目的时候，用到了box-shadow属性。感觉这个属性挺有意思的，索性专门整理一下。
这里我们用border-radius属性设置了一个圆形，并且为这个圆形添加了一个浅黄色阴影和一个白色的阴影。
第四个10px是阴影半径的意思；最后一个规定了阴影的颜色为rgba(255,255,0,0.5)。
也就是说，我们为class为test的div元素添加了一个偏离框，并且向右距离为10px、向下距离为10px、模糊半径为10px、阴影半径为10px的浅黄色的阴影。
根据前面的语法规则，box-shadow可以有六个值。接下来我们来聊一聊box-shadow属性里的每个值都怎么用
当它为正值的时候表示向右位移一定的距离【出现在元素的右边】，负值表示向左位移【出现在元素的左边】。这个距离的单位可以是px、em或者rem；
当值为负的时候表示向上偏移一定的距离【出现在元素的上方】；值为正的时候表示向下偏移一定的距离【出现的元素的下方】
blur指的是阴影的模糊半径。这个值使得阴影部分的过渡看起来更柔和。我们可以试一试不同blur值对阴影效果的影响：
将blur值为5px、10px、15px的效果图依次从左往右排列，可以看出来随着模糊半径数值的增大，阴影的模糊程度越高。
spread表示的是阴影的半径。我在网上看到有人对spread和blur的区别发出疑问，其实很简单：blur用于描述模糊半径，它的值决定了阴影的模糊程度；而spread是表示阴影所占区域的大小，这是两个不同的概念。
将spread的值为5px、15px、25px的效果图依次 从左向右排列，很明显阴影在逐渐变大
了解了box-shadow之后，我们可以用来做一些有趣的事情。比如给阴影添加动画，对元素添加：hover伪元素，形成鼠标悬浮在元素上时，阴影扩大的效果
好了，今天关于边框阴影box-shadow属性的总结就写到这里了。鉴于刚刚做上面这个鼠标悬浮效果的时候用到了CSS3的另外两个新属性transition和transform，我打算下次来写一些这两个属性。
1.阿里云: 本站目前使用的是阿里云主机，安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入
2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动，优惠券领取点击进入
3.广告联盟: 整理了目前主流的广告联盟平台，如果你有流量，可以作为参考选择适合你的平台点击进入
