- 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
- 可视化工具 Box-shadow_generator
语法
box-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
.shadow div{
float:left;
margin:50px 120px;
width:100px;
height:100px;
border:2px solid orange;
text-align:center;
line-height:100px;
}
.left{
box-shadow:-5px 0 10px -5px #00ff00;
}
.bottom{
box-shadow:0 5px 10px -5px #00ff00;
}
.right{
box-shadow:5px 0 10px -5px #00ff00;
}
.top{
box-shadow:0px -5px 10px -5px #00ff00;
}
.left-top{
box-shadow:-5px -5px 10px -4px #00ff00;
}
.right-top{
box-shadow:5px -5px 10px -4px #00ff00;
}
.left-bottom{
box-shadow:-5px 5px 10px -4px #00ff00;
}
.right-bottom{
box-shadow:5px 5px 10px -4px #00ff00;
}
.no-left{
/* .right-bottom,.right-top组合 */
box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px #00ff00;
}
.no-bottom{
/* .left-top,.right-top组合 */
box-shadow:-5px -5px 10px -4px #00ff00,5px -5px 10px -4px #00ff00;
}
.no-right{
/* .left-top，.left-bottom组合 */
box-shadow:-5px -5px 10px -4px #00ff00,-5px 5px 10px -4px #00ff00;
}
.no-top{
/* .left-bottom,,right-bottom组合 */
box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;
}
</style>
<body>
<div class="shadow">
<div class="left">左边阴影</div>
<div class="bottom">底部阴影</div>
<div class="right">右部阴影</div>
<div class="top">顶部部阴影</div>
<div class="left-top">左上阴影</div>
<div class="right-top">右上阴影</div>
<div class="left-bottom">左下阴影</div>
<div class="right-bottom">右下阴影</div>
<div class="no-left">无左阴影</div>
<div class="no-bottom">无下阴影</div>
<div class="no-right">无右阴影</div>
<div class="no-top">无上阴影</div>
</div>
</body>
</html>
box-shadow制作各种单边，多边阴影