CSS——盒⼦阴影（box-shadow）
语法 box-shadow: h-shadow v-shadow blur spread color inset;
注释: box-shadow向框添加⼀个或多个阴影. 该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜⾊值及可选的inset关键词来规定。省略长度的值是0。
未加阴影效果如下：
1、外阴影
a、给元素右边框和下边框加外阴影——把⽔平阴影位置、垂直阴影位置偏移值均设为正值
css代码
/* 阴影向右偏移10px、向下偏移10px、模糊距离为20px、阴影尺⼨为10px、颜⾊为pink*/
box-shadow: 10px 10px 20px 10px pink;
css代码
/* 模糊距离为1px */
box-shadow: 10px 10px 1px 10px pink;
css代码
/* 阴影尺⼨为1px */
box-shadow: 10px 10px 20px 1px pink;
b、给元素左边框和上边框加外阴影——把⽔平阴影位置、垂直阴影位置偏移值均设为负值
css代码
/* 阴影向左偏移10px、向上偏移10px、模糊距离为20px、阴影尺⼨为10px、颜⾊为pink */
box-shadow: -10px -10px 20px 10px pink;
2、内阴影（inset）
a、给元素左边框和上边框加内阴影——把⽔平阴影位置、垂直阴影位置偏移值均设为正值
css代码
/* 使⽤关键字 inset 设置内阴影 */
box-shadow: 10px 10px 20px 1px pink inset;
b、给元素右边框和下边框设置内阴影——把⽔平阴影位置、垂直阴影位置偏移值均设为负值
css代码
box-shadow: -10px -10px 20px 1px pink inset;
3、实际应⽤
给div加外阴影实现⾬后彩虹
html代码
<div class="box-shadow-test">
</div>
css代码
borderbox.box-shadow-test {
height: 100px;
width: 100px;
margin: 100px auto;
transform: rotate(45deg);
border-radius: 100px 0 0 0;
box-shadow:
/*参数依次为：颜⾊、⽔平阴影位置、垂直阴影位置、模糊距离、阴影⼤⼩*/
#f44336 -2px -2px 0 1px,
#ff9800 -4px -4px 0 3px,
#ffeb3b -6px -6px 0 5px,
#8bc34a -8px -8px 0 7px,
#00bcd4 -10px -10px 0 9px,
#2196f3 -12px -12px 0 11px,
#9c27b0 -14px -14px 0 13px;
}
彩虹来啦，，，

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