css中box-shadow方法如何使用

css中的box-shadow属性用于给元素添加阴影效果，支持为元素设置一个或多个阴影，可调整阴影的位置、模糊程度、扩散范围、颜色等属性，适配不同的设计需求。

box-shadow基础语法

box-shadow的完整语法格式如下：

/* 单阴影语法 */
box-shadow: offset-x offset-y blur-radius spread-radius color inset;

/* 多阴影语法，用逗号分隔多个阴影参数 */
box-shadow: shadow1, shadow2, ...;

各个参数的具体含义如下：

• offset-x：水平偏移量，正值表示阴影向右偏移，负值表示向左偏移，必填参数。
• offset-y：垂直偏移量，正值表示阴影向下偏移，负值表示向上偏移，必填参数。
• blur-radius：模糊半径，值越大阴影越模糊，默认为0，表示阴影无模糊，可选参数。
• spread-radius：扩散半径，正值会让阴影扩大，负值会让阴影收缩，默认为0，可选参数。
• color：阴影颜色，支持所有css合法颜色值，可选参数，默认颜色由浏览器决定。
• inset：可选关键字，添加后阴影会变为内阴影，不添加则为外阴影。

基础使用示例

简单外阴影

实现一个向右下角偏移10px、模糊5px的灰色外阴影：

.simple-shadow {
    width: 200px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #eee;
    /* 水平偏移10px，垂直偏移10px，模糊5px，颜色为半透明灰色 */
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

内阴影效果

实现元素内部的内阴影效果：

.inner-shadow {
    width: 200px;
    height: 100px;
    background-color: #f5f5f5;
    /* 添加inset关键字实现内阴影，向上偏移5px，模糊8px */
    box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.2) inset;
}

进阶使用场景

多边框阴影效果

利用多阴影语法可以实现类似多边框的效果：

.multi-border {
    width: 200px;
    height: 100px;
    background-color: #fff;
    /* 第一层阴影实现1px实线边框效果，第二层实现3px虚线边框效果 */
    box-shadow: 0 0 0 1px #333, 0 0 0 5px #666;
}

悬浮卡片阴影

常见的卡片悬浮时阴影加深的效果，结合过渡属性实现平滑变化：

.card {
    width: 300px;
    height: 180px;
    background-color: #fff;
    border-radius: 8px;
    /* 初始状态为轻微阴影 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    /* 添加过渡效果 */
    transition: box-shadow 0.3s ease;
}
.card:hover {
    /* 悬浮时阴影加深，偏移和模糊范围增大 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

注意事项

• box-shadow属性不会影响元素本身的布局，阴影不会占据页面空间，也不会触发元素的重排。
• 如果同时设置多个阴影，先写的阴影会覆盖在后写的阴影之上。
• 内阴影inset关键字必须放在参数列表的最后，否则属性会失效。
• 模糊半径和扩散半径不支持负值，设置负值会被浏览器忽略。

如果需要兼容旧版本浏览器，需要注意部分低版本浏览器可能需要添加前缀，比如-webkit-box-shadow、-moz-box-shadow，不过目前主流浏览器都已经支持标准的box-shadow属性，无需额外添加前缀。

cssbox-shadow阴影效果前端样式修改时间：2026-07-19 12:12:21