css添加边框阴影上、下、左、右详解
Css边框阴影：box-shadow属性
对于这个属性，总是记了⼜忘，忘记了⼜看百度，今天总结⼀下；
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把⼀个或多个下拉阴影添加到框上。该属性是⼀个⽤逗号分隔阴影的列表，每个阴影由 2-4 个长度值、⼀个可选的颜⾊值和⼀个可选的 inset 关键字来规定。省略长度的值是 0。
先看⼀下CSS3上是怎么定义的：
box shadow怎么设置
值说明
h-shadow 必需的。⽔平阴影的位置。允许负值 (当它为正值的时候表⽰向右位移⼀定的距离【出现在元素的右边】，负值表⽰向左位移【出现在元素的左
边】)
v-shadow 必需的。垂直阴影的位置。允许负值 (当值为负的时候表⽰向上偏移⼀定的距离【出现在元素的上⽅】；值为正的时候表⽰向下偏移⼀定的距离
【出现的元素的下⽅】)
blur可选。模糊距离（模糊半径，它的值决定了阴影的模糊程度，也就是⽑光）
spread可选。spread是表⽰阴影所占区域的⼤⼩
color可选。阴影的颜⾊。在CSS颜⾊值寻颜⾊值的完整列表
inset可选。从外层的阴影（开始时）改变阴影内侧阴影
重点看⼀下 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*/
inset 【可选】
默认情况下，我们设置的阴影都是外部阴影，⽽这个属性值的作⽤是将外部阴影转换成内部阴影。
box-shadow: 10px 10px 10px 5px blue;/*默认为外部阴影*/
box-shadow: 10px 10px 10px 5px blue inset;/*将外部阴影切换为内部阴影*/
⼀些常见的阴影例⼦：
spread【可选】，⼀般不写
box-shadow: 10px 0px 10px rgba(0,0,0,0.9)/*阴影出现在元素的右侧*/ 0 就是表⽰上下偏移量为零，所以上下没有阴影box-shadow: -10px 0px 10px rgba(0,0,0,0.9)/*阴影出现在元素的左侧*/
box-shadow: 0px -20px 10px rgba(0,0,0,0.9)/*阴影出现在元素上⽅*/ 0 就是表⽰左右偏移量为零，所以左右没有阴影box-shadow: 0px 20px 10px rgba(0,0,0,0.9)/*阴影出现在元素下⽅*/
box-shadow: 2px 2px 2px #E5E5E5, -1px -1px 1px #E5E5E5; // 给多个边框添加阴影效果，四个边框都有阴影

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