css边框阴影制作

CSS 边框阴影制作方法

box-shadow 属性基础语法

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

• h-offset：水平阴影位置（正值向右，负值向左）。
• v-offset：垂直阴影位置（正值向下，负值向上）。
• blur：模糊距离（可选，值越大边缘越模糊）。
• spread：阴影扩展尺寸（可选，正值扩大，负值缩小）。
• color：阴影颜色（支持 HEX/RGBA 等格式）。
• inset：改为内阴影（默认外阴影）。

常见阴影效果示例

基础外阴影

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

• 生成向右下方偏移5px、模糊10px的灰色阴影。

内阴影效果

box-shadow: inset 0 0 15px #4a90e2;

• 元素内部显示蓝色模糊阴影，适合作为高光效果。

多重阴影

box-shadow: 
  0 2px 4px rgba(0,0,0,0.1),
  0 4px 8px rgba(0,0,0,0.1);

• 叠加两层阴影增强立体感，常用于卡片设计。

悬浮效果

box-shadow: 0 4px 20px rgba(0,0,0,0.15);
transition: box-shadow 0.3s ease;

:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.2); }

- 结合过渡动画实现鼠标悬停时阴影扩散效果。

---

高级技巧

不规则形状阴影
对非矩形元素（如圆形）使用 `filter: drop-shadow()`：

.circle { width: 100px; height: 100px; border-radius: 50%; filter: drop-shadow(2px 4px 6px black); }

性能优化
- 避免过度使用大面积阴影
- 优先使用 RGBA 透明度替代 opacity
- 静态阴影可考虑用阴影图片替代

浏览器兼容
- 现代浏览器全面支持 box-shadow
- IE9+ 需前缀 `-ms-box-shadow`
- 复杂场景可用 PostCSS 自动添加前缀