CSS边框阴影效果设置详解

在网页设计中，给元素添加边框阴影可以提升页面的层次感和视觉效果，让内容更有立体感。CSS中通过box-shadow属性即可实现边框阴影效果，这个属性支持多个参数，可以灵活控制阴影的位置、模糊程度、扩散范围、颜色和是否内阴影等效果。

box-shadow属性基础语法

box-shadow的语法格式如下，其中方括号包裹的参数为可选参数：

/* 基础语法 */
box-shadow: [inset] x偏移量 y偏移量 [模糊半径] [扩散半径] [颜色];

各个参数的含义如下：

• inset：可选值，添加该参数后阴影会变为内阴影，不添加则默认为外阴影
• x偏移量：必选值，表示阴影在水平方向的偏移距离，正数向右偏移，负数向左偏移，单位通常为px
• y偏移量：必选值，表示阴影在垂直方向的偏移距离，正数向下偏移，负数向上偏移，单位通常为px
• 模糊半径：可选值，默认值为0，值越大阴影边缘越模糊，单位为px
• 扩散半径：可选值，默认值为0，正数会让阴影向四周扩展，负数会让阴影收缩，单位为px
• 颜色：可选值，默认跟随元素的文本颜色，支持所有CSS合法的颜色表示方式，如十六进制、rgb、rgba等

常见阴影效果示例

1. 基础外阴影

最基础的外阴影只需要设置水平和垂直偏移量即可，下面给一个div元素添加右下角的灰色阴影：

/* 基础外阴影样式 */
.shadow-basic {
  width: 200px;
  height: 120px;
  background-color: #fff;
  border: 1px solid #eee;
  /* 向右偏移5px，向下偏移5px，灰色阴影 */
  box-shadow: 5px 5px #ccc;
}

2. 带模糊效果的外阴影

添加模糊半径可以让阴影边缘更柔和，配合扩散半径还能调整阴影的大小：

/* 带模糊和扩散的外阴影 */
.shadow-blur {
  width: 200px;
  height: 120px;
  background-color: #fff;
  border: 1px solid #eee;
  /* 向右偏移3px，向下偏移3px，模糊半径6px，扩散半径1px，半透明黑色阴影 */
  box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}

3. 内阴影效果

添加inset参数即可实现内阴影，看起来像是元素内部凹陷的效果：

/* 内阴影样式 */
.shadow-inset {
  width: 200px;
  height: 120px;
  background-color: #f5f5f5;
  /* 内阴影，向右偏移2px，向下偏移2px，模糊半径4px，半透明黑色 */
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15);
}

4. 多重阴影效果

box-shadow属性支持同时设置多个阴影，多个阴影之间用逗号分隔即可，可以实现更丰富的视觉效果：

/* 多重阴影样式 */
.shadow-multiple {
  width: 200px;
  height: 120px;
  background-color: #fff;
  border: 1px solid #eee;
  /* 第一层浅阴影，第二层深一点但更模糊的阴影 */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1),
              4px 4px 8px rgba(0, 0, 0, 0.05);
}

注意事项

使用box-shadow属性时需要注意，阴影不会影响页面的布局，不会占用文档流的空间，这一点和margin、padding等属性不同。如果需要添加阴影的元素有圆角，阴影也会自动适配圆角效果，不需要额外设置。另外如果要兼容老旧的浏览器，可以添加浏览器前缀，不过目前主流浏览器都已经支持标准的box-shadow属性，通常不需要额外添加前缀。

CSS_box_shadow边框阴影内阴影多重阴影box_shadow教程