css如何添加阴影边框

在CSS中实现阴影边框效果主要依靠两个核心属性，分别是用于盒子元素的box-shadow和用于文字元素的text-shadow，这两个属性可以通过不同的参数组合实现丰富的阴影效果。

box-shadow属性实现盒子阴影边框

box-shadow可以给块级元素、行内块元素等添加阴影效果，语法格式为box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 inset;，其中水平偏移和垂直偏移是必填参数，其余都是可选参数。

基础阴影边框示例

下面是一个给div元素添加简单灰色阴影边框的实例：

/* 基础阴影样式 */
.shadow-box {
    width: 200px;
    height: 120px;
    background-color: #f5f5f5;
    /* 水平偏移2px 垂直偏移2px 模糊半径4px 扩散半径0 灰色阴影 */
    box-shadow: 2px 2px 4px 0 #cccccc;
    margin: 20px;
    padding: 15px;
}

对应的HTML结构如下：

<div class="shadow-box">
    这是一个带基础阴影边框的盒子
</div>

带扩散效果的阴影边框

如果希望阴影范围更大，可以调整扩散半径参数，下面的示例会让阴影向外扩散3px：

.spread-shadow {
    width: 200px;
    height: 120px;
    background-color: #fff;
    border: 1px solid #eeeeee;
    /* 水平偏移0 垂直偏移0 模糊半径8px 扩散半径3px 浅蓝色阴影 */
    box-shadow: 0 0 8px 3px #e6f7ff;
    margin: 20px;
    padding: 15px;
}

内阴影边框效果

如果需要阴影在元素内部，可以添加inset关键字，实现内阴影效果：

.inner-shadow {
    width: 200px;
    height: 120px;
    background-color: #fafafa;
    /* 内阴影 水平偏移0 垂直偏移2px 模糊半径6px 扩散半径0 灰色阴影 */
    box-shadow: inset 0 2px 6px 0 #dddddd;
    margin: 20px;
    padding: 15px;
}

text-shadow属性实现文字阴影边框

text-shadow用于给文字添加阴影效果，语法格式为text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;，参数含义和box-shadow的前三个参数一致。

文字阴影示例

下面是给标题文字添加阴影效果的实例：

.text-shadow-title {
    font-size: 24px;
    color: #333333;
    /* 水平偏移1px 垂直偏移1px 模糊半径2px 深灰色阴影 */
    text-shadow: 1px 1px 2px #999999;
    margin: 20px;
}

<h3 class="text-shadow-title">带阴影效果的标题文字</h3>

多阴影叠加效果

两个阴影属性都支持同时设置多个阴影，用逗号分隔即可，下面的示例给盒子添加两层不同颜色的阴影：

.multi-shadow {
    width: 200px;
    height: 120px;
    background-color: #fff;
    /* 第一层浅蓝色阴影 第二层浅粉色阴影 */
    box-shadow: 0 0 5px 2px #e6f7ff, 0 0 10px 4px #fff0f6;
    margin: 20px;
    padding: 15px;
}

参数说明汇总

以下是box-shadow和text-shadow的参数说明对比：

实际使用中可以根据设计需求灵活调整各个参数，实现符合预期的阴影边框效果。

CSSbox_shadowtext_shadow阴影边框修改时间：2026-06-15 19:33:35