css边框阴影制作

CSS 边框阴影制作

CSS 提供了 box-shadow 属性，用于为元素添加阴影效果。该属性可以控制阴影的颜色、大小、模糊度、偏移量以及是否内嵌。

基本语法

box-shadow 属性的基本语法如下：

box-shadow: h-offset v-offset blur spread color inset;

• h-offset：水平阴影偏移量（正值向右，负值向左）。
• v-offset：垂直阴影偏移量（正值向下，负值向上）。
• blur：阴影模糊半径（值越大越模糊，0 表示无模糊）。
• spread：阴影扩展半径（正值扩大阴影，负值缩小阴影）。
• color：阴影颜色（支持 HEX、RGB、RGBA 等格式）。
• inset：可选关键字，将阴影改为内阴影（默认是外阴影）。

示例代码

为元素添加简单外阴影：

.shadow-example {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

• 水平偏移 5px，垂直偏移 5px，模糊半径 10px，颜色为半透明黑色。

为元素添加内阴影：

.inner-shadow {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

• 使用 inset 关键字实现内阴影效果。

多重阴影

box-shadow 支持同时定义多个阴影，用逗号分隔：

.multiple-shadows {
  box-shadow: 
    3px 3px 5px rgba(0, 0, 0, 0.2),
    -3px -3px 5px rgba(255, 255, 255, 0.5);
}

• 第一组阴影向右下方延伸，第二组向左上方延伸。

高级技巧

通过调整 spread 参数模拟边框效果：

.border-like-shadow {
  box-shadow: 0 0 0 2px #3498db;
}

• 模糊半径为 0，扩展半径为 2px，形成类似边框的阴影。

兼容性

box-shadow 在现代浏览器中支持良好。如需兼容旧版浏览器，可添加前缀：

.legacy-shadow {
  -webkit-box-shadow: 3px 3px 5px #ccc;
  -moz-box-shadow: 3px 3px 5px #ccc;
  box-shadow: 3px 3px 5px #ccc;
}