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="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【必需】borderbox
这个值表⽰阴影在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，我打算下次来写⼀些这两个属性。
原⽂来⾃：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。