2025-07-10 13:23:01 作者：daqian 来源：35bo
box shadow（盒子阴影）是css中一个强大的属性，它能为元素添加逼真的阴影效果，极大地增强页面的视觉吸引力。
首先，box shadow由多个值组成，其中第一个值决定了阴影的水平偏移量。正值表示阴影向右偏移，负值则向左偏移。例如，box-shadow: 5px 0 0 red; 会在元素的右侧创建一个红色阴影，水平偏移量为5像素。
第二个值是垂直偏移量。正值使阴影向下移动，负值使其向上移动。如box-shadow: 0 5px 0 blue; 会在元素下方生成一个蓝色阴影，垂直偏移量为5像素。
第三个值是模糊半径。它控制阴影边缘的模糊程度，值越大阴影越模糊。比如box-shadow: 0 0 5px green; 会产生一个边缘较为模糊的绿色阴影，模糊半径为5像素。
第四个值是扩展半径。用于增大或减小阴影的尺寸，正值使阴影扩大，负值则使其缩小。像box-shadow: 0 0 0 5px yellow; 就会创建一个比元素本身大5像素的黄色阴影。
第五个值是颜色，用于指定阴影的颜色。例如box-shadow: 0 0 0 0 black; 可创建一个黑色阴影，虽然这里扩展半径为0，元素大小不变，但能看出颜色的设置效果。
此外，box shadow还支持多个阴影的叠加。通过逗号分隔多个阴影值，可以创建出复杂而有趣的阴影效果。如box-shadow: 5px 5px 5px gray, -5px -5px 5px silver; 会在元素的右下角和左上角分别生成不同颜色的阴影，增加层次感。
在实际应用中，box shadow可用于按钮、卡片、导航栏等元素，使其在页面中更加突出。比如为按钮添加一个微妙的阴影，当鼠标悬停时阴影变大，能提升按钮的交互性和视觉效果。合理运用box shadow属性，能让页面设计更加精致，给用户带来更好的视觉体验，为网页增添独特的魅力。
