在Web前端开发中，给边框（border）添加阴影（shadow）效果是一种常见的样式设计。通过为元素添加阴影，可以使页面看起来更加立体、有层次感。下面将介绍几种常用的给边框添加阴影的方法。
box-shadow属性
box-shadow属性是CSS3中提供的一种给元素添加阴影效果的方式。它的语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
其中，h-shadow表示水平阴影的位置，可以是正值也可以是负值；v-shadow表示垂直阴影的位置，也可以是正值或负值；blur表示模糊半径，值越大阴影越模糊；spread表示阴影的尺寸，也可以是正值或负值；color表示阴影的颜色；inset表示是否将阴影设置为内阴影，可选。
示例代码如下：
div {
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}
border-shadow属性（已废弃）
在过去的一些旧版浏览器中，box-shadow属性的兼容性不是很好。为了解决这个问题，可以使用border-shadow属性来给边框添加阴影效果。它的语法与box-shadow类似，只是将box-shadow改为border-shadow。
示例代码如下：
div {
border-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}
不过需要注意的是，border-shadow属性在新版浏览器中已废弃，不再推荐使用。
box-decoration-break属性
box-decoration-break属性用于控制元素边框的显示方式，它有两个可选值：slice和clone。其中，slice表示在元素边框的连接处适应阴影效果，而clone表示在边框的每个连接处都会出现阴影效果。
示例代码如下：
div {
box-decoration-break: clone;
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}
伪元素（::before和::after）
除了直接在元素上添加阴影效果外，还可以通过伪元素的方式来实现边框阴影效果。首先，通过设置元素的position属性为relative或absolute，然后使用伪元素::before和::after添加边框和阴影效果。
示例代码如下：
div {
position: relative;
border: 1px solid #000;
}
div::before {
content: "";
position: absolute;
top: 10px; /* 调整阴影位置 */
left: 10px; /* 调整阴影位置 */
width: calc(100% - 20px); /* 调整阴影尺寸 */
height: calc(100% - 20px); /* 调整阴影尺寸 */
z-index: -1; /* 将阴影置于底层 */
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}
组合使用
最后，可以将上述方法进行组合使用，以达到更加丰富的阴影效果。可以通过调节各种属性的值来实现不同的效果。
示例代码如下：
div {
position: relative;
border: 1px solid #000;
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}
div::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
z-index: -1;
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}
通过上述方法，我们可以很容易地给边框添加阴影效果，从而使页面看起来更加生动、有深度。通过调节阴影的位置、模糊半径、颜色等属性，可以实现不同的阴影效果，让页面更加美观。