要添加css边框阴影，应使用box-shadow属性，其基本语法为：box-shadow: h-shadow v-shadow blur spread color inset；1. h-shadow设置水平阴影位置，允许负值；2. v-shadow设置垂直阴影位置，也允许负值；3. blur控制模糊程度，数值越大越模糊；4. spread调节阴影扩散范围，正值扩大、负值缩小；5. color定义阴影颜色；6. inset用于将阴影设为内阴影；可以通过叠加多个box-shadow实现更复杂效果，如模拟3d层次或高光；但需注意性能问题；box-shadow与border不冲突，但搭配border-radius时可能超出圆角边界，可通过调整blur或spread解决；也可通过增加spread或调整padding避免大border宽度遮挡阴影；此外，box-shadow可结合:hover伪类制作悬停效果，配合transition实现平滑动画。
添加css边框阴影，简单来说，就是使用box-shadow属性。它可以让你的网页元素看起来更有层次感，但用不好也会显得廉价。关键在于理解它的参数和巧妙运用。
/* 基本语法 */ box-shadow: h-shadow v-shadow blur spread color inset; /* 示例 */ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 常用 */ box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2); /* 带扩散 */ box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5); /* 内阴影 */
h-shadow：水平阴影的位置，允许负值。 v-shadow：垂直阴影的位置，允许负值。 blur：模糊距离，值越大，阴影越模糊。 spread：阴影的扩散范围，正值增加阴影大小，负值缩小阴影大小。 color：阴影颜色。 inset：将阴影改为内阴影。
如何使用多个box-shadow创造更复杂的效果？
你可以叠加多个box-shadow，创造出更复杂、更微妙的效果。这就像绘画一样，一层一层地叠加颜色和阴影。
.element { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), /* 第一层阴影 */ -2px -2px 4px rgba(255, 255, 255, 0.1); /* 第二层阴影，模拟高光 */ }
这种技巧可以用来模拟3D效果，或者为元素增加更丰富的视觉层次。注意，过多的阴影可能会导致性能问题，所以要适度使用。
立即学习“前端免费学习笔记（深入）”；
box-shadow与border属性冲突吗？如何协调使用？
box-shadow并不会直接与border属性冲突，它们是独立控制元素外观的不同方面。但是，不恰当的组合可能会导致视觉上的不协调。
一个常见的场景是，当border-radius与box-shadow一起使用时，如果box-shadow的blur值过大，阴影可能会超出圆角边界，看起来不美观。
.element { border: 1px solid #ccc; border-radius: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 阴影超出圆角 */ }
解决方法是调整blur值，或者使用spread属性来控制阴影的大小。
.element { border: 1px solid #ccc; border-radius: 5px; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3); /* 调整后的阴影 */ }
另一个需要注意的是，如果border的宽度很大，box-shadow可能会被遮挡。这时，可以考虑增加box-shadow的spread值，或者调整元素的padding。
如何使用box-shadow制作悬停效果？
box-shadow可以与:hover伪类结合使用，创建吸引人的悬停效果。
.button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* 初始阴影 */ transition: box-shadow 0.3s ease; /* 添加过渡效果 */ } .button:hover { box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4); /* 悬停时的阴影 */ }
这段代码会在鼠标悬停在按钮上时，增加阴影的深度，让按钮看起来像是被“抬起”了一样。transition属性可以使这个变化过程更加平滑。
