CSS 的 box-shadow 属性对于在元素周围添加阴影效果非常有用。可以添加一个或多个阴影效果，以逗号分隔。
盒子阴影由相对于元素的 X 和 Y 偏移、模糊、扩散半径和颜色来描述。
可能值
insert:
如果未指定值，则假定阴影为投影。
如果使用 inset，阴影将绘制在边框内、背景上方、内容下方。
<offset-x>:以 <length> 形式指定水平距离。负值将阴影定位在元素的左侧。
<offset-y>:指定 <length> 中的垂直距离。负值将阴影定位在元素上方。
<blur-radius>:
设置模糊效果的半径。第三个 <length> 值。
值越大，模糊程度越大。
不允许使用负值。
如果没有值，则为 0，这会使阴影边缘变得锐利。
<spread-radius>:
设置阴影的大小。第四个 <length> 值。
正值会使阴影变大。
负值使阴影缩小。
如果没有值，则为0，这使得阴影的大小与元素。
<color>:可能的关键字的颜色值和颜色符号，例如颜色名称、十六进制值、rgb 等。
适用范围
所有 HTML 元素.
DOM 语法
object.style.boxShadow = "none | inset 10px 10px 5px rgb(255, 255, 255)"; CSS box-shadow: 插入值
这里是一个示例:
<html>
<style>
div {
margin: 4em;
padding: 1em;
height: 80px;
width: 80px;
display: inline-block;
}
#a {
box-shadow:10px 10px 10px 2em #f4aab9;
}
#b {
box-shadow:inset -20px -3em 3em rgba(228, 228, 35, 0.8);
}
#c {
box-shadow: 5px 15px 3px rgb(226, 67, 228);
border: 1px solid black;
}
</style>
<head>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>