在网页开发中，我们常常需要为按钮、卡片或图片等元素添加阴影，使界面更具立体感。CSS中并没有名为border-shadow的独立属性，实际实现边框及盒子阴影效果使用的是box-shadow属性。它可以为元素的外边框或内边框生成一层或多层阴影。
box-shadow基本语法
box-shadow属性的语法格式如下，可以设置外阴影或内阴影，并支持同时写多组阴影用逗号分隔：
/* 语法：box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 inset(可选); */
.box {
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);
}
.inner {
box-shadow: inset 0 0 8px #999;
}
参数说明
- 水平偏移：正值向右，负值向左
- 垂直偏移：正值向下，负值向上
- 模糊半径：数值越大越模糊，0为实边
- 扩散半径：正值阴影扩大，负值缩小
- 颜色：支持rgba等透明颜色
- inset：加上后变为内阴影
给边框添加阴影的常见写法
当我们给一个带边框的元素设置box-shadow时，阴影会基于边框盒子绘制，看起来就像边框带了阴影。下面演示一个卡片效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.card {
width: 200px;
padding: 16px;
border: 1px solid #ddd;
border-radius: 6px;
/* 边框外阴影 */
box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<div class="card">这是一个带边框阴影的卡片</div>
</body>
</html>
多层阴影叠加
使用逗号可以叠加多个阴影，比如同时做细描边阴影和柔和投影：
.layer {
border: 1px solid #ccc;
box-shadow: 0 0 0 1px #fff, 2px 2px 6px rgba(0,0,0,0.2);
}
注意事项
如果只想让边框本身有颜色变暗而不想有偏移，可以把偏移设为0并配合扩散半径。另外，使用box-shadow不会占用布局空间，不会影响周围元素排布，性能也较好。记住并没有border-shadow这个属性，网上搜到的border-shadow大多是误称，正确写法就是box-shadow。
小结：CSS边框阴影通过box-shadow实现，掌握偏移、模糊、扩散与inset即可灵活控制效果。
CSSbox-shadowborder-shadow边框阴影阴影效果修改时间：2026-07-25 10:12:21