box-shadow

转自：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