在CSS中，给元素添加边框阴影不需要额外引入其他库，直接使用原生的box-shadow属性即可实现，这个属性可以作用于大部分块级元素和内联块元素。
box-shadow属性的基础语法
box-shadow的语法格式如下，其中前两个参数是必填项，其余参数可选：
/* 基础语法 */ box-shadow: x偏移 y偏移 模糊半径 扩散半径 颜色 阴影类型;
各个参数的具体含义如下：
- x偏移：必填，设置阴影在水平方向的偏移距离，正数向右偏移，负数向左偏移，单位通常是px
- y偏移：必填，设置阴影在垂直方向的偏移距离，正数向下偏移，负数向上偏移，单位通常是px
- 模糊半径：可选，设置阴影的模糊程度，值越大阴影越模糊，0表示没有模糊，单位通常是px
- 扩散半径：可选，设置阴影的扩散范围，正数会让阴影扩大，负数会让阴影缩小，单位通常是px
- 颜色：可选，设置阴影的颜色，支持所有CSS颜色表示方式，默认是元素的文字颜色
- 阴影类型：可选，默认是外阴影，添加inset关键字可以设置为内阴影
常见的边框阴影实现示例
1. 基础外阴影
给一个div元素添加右下偏移的外阴影，模糊程度为10px，颜色为半透明灰色：
/* 基础外阴影样式 */
.shadow-demo {
width: 200px;
height: 100px;
background-color: #fff;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
对应的HTML结构如下：
<div class="shadow-demo">基础外阴影效果</div>
2. 内阴影效果
添加inset关键字可以实现内阴影，看起来像是元素向内凹陷：
/* 内阴影样式 */
.inner-shadow-demo {
width: 200px;
height: 100px;
background-color: #f5f5f5;
box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2);
}
3. 多重阴影效果
box-shadow支持同时设置多个阴影，多个阴影之间用逗号分隔即可：
/* 多重阴影样式 */
.multi-shadow-demo {
width: 200px;
height: 100px;
background-color: #fff;
/* 同时添加两层外阴影 */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2),
4px 4px 10px rgba(0, 0, 0, 0.1);
}
4. 无偏移的柔和阴影
把x偏移和y偏移都设为0，可以得到四周均匀的柔和阴影，常用于卡片类元素：
/* 均匀柔和阴影 */
.card-shadow {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
添加边框阴影的注意事项
- box-shadow属性不会影响元素本身的布局，不会占用额外的盒模型空间，和
margin属性不同 - 如果元素设置了
border-radius圆角，阴影也会自动跟随圆角轮廓显示，不需要额外处理 - 阴影颜色如果设置透明度较低，叠加在复杂背景上时可能会出现显示异常，建议根据背景调整颜色透明度
- 过多的阴影或者过大的模糊半径会影响页面渲染性能，尤其是移动端设备，建议合理使用阴影参数
兼容性问题说明
box-shadow属性在现代浏览器中都有很好的支持，包括Chrome、Firefox、Safari、Edge等，不需要添加浏览器前缀。如果需要兼容非常老旧的浏览器比如IE8及以下版本，这些浏览器不支持box-shadow属性，无法通过CSS实现阴影效果，只能使用图片替代。
CSSbox-shadow边框阴影样式属性修改时间：2026-07-20 10:24:21