语法
boxShadow 属性的语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平阴影的位置。可以为正值（向右偏移）或负值（向左偏移）。v-shadow：垂直阴影的位置。可以为正值（向下偏移）或负值（向上偏移）。blur：模糊距离。可选参数，值越大，阴影越模糊。spread：阴影的尺寸。可选参数，正值扩大阴影，负值缩小阴影。color：阴影的颜色。可以使用颜色值或关键词。inset：可选参数，指定阴影为内阴影。
示例
添加外阴影
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px #888888;
}在上面的示例中，我们为一个名为 .box 的元素添加了一个向右下方偏移的阴影，模糊距离为 10 像素，颜色为 #888888。
添加内阴影
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 0 0 10px #888888;
}在这个示例中，我们为 .box 元素添加了一个内阴影，模糊距离为 10 像素，颜色为 #888888。
常见应用场景
按钮阴影效果
-- -------------------- ---- ------- ------- - -------- ---- ----- ----------------- -------- ------ ----- ------- ----- -------------- ---- ----------- --- --- --- -------- - ------------- - ----------- --- --- --- -------- ---- ---- --- -------- -
通过为按钮添加阴影效果，可以使按钮看起来更加立体和吸引人。
图片阴影效果
.image {
width: 200px;
height: 200px;
background-image: url('example.jpg');
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}为图片添加阴影效果可以让图片看起来更加突出，增强视觉效果。
结语
通过 boxShadow 属性，我们可以轻松实现各种阴影效果，为页面增添立体感和层次感。希望本文对你有所帮助，欢迎在实际项目中尝试使用 boxShadow 属性，为页面增添新的视觉效果。