box-shadow
2019-11-29 本文已影响0人
Do_Du
转自：https://www.jianshu.com/p/32deebd5afd2
box-shadow: 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色
内阴影：inset 可以设置成内部阴影
效果1：
<div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div>
// box-shadow: 0 0 10px #f00 //（因没有使其X轴与Y轴移动 设置值 所在会在本身发生作用 半径范围，颜色）
image.png
效果2：
<div style="box-shadow:-4px -4px 10px #f00;border:1px solid green"> </div>
// box-shadow:-4px -4px 10px #f00; // X轴与Y轴改变成了负值（负值 向左 向上）
image.png
效果3：
<div style="box-shadow:4px 4px 10px #f00;border:1px solid green"> </div>
// box-shadow:4px 4px 10px #f00; // X轴与Y轴改变成了正值（正值 向右 向下）
image.png
效果4：
<div style="box-shadow:-10px 0px 10px red, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue;" /*下边阴影*/ >
</div>
image.png
效果5：
<div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"> </div>
// box-shadow: 0px 0px 10px red inset;
image.png
