EnlightenCode

CSS 阴影效果的进阶技巧 ✨ ​

在 CSS 中创建阴影效果时，除了常用的 box-shadow 属性外，还有一些更强大的技巧可以帮助我们实现更精细的阴影效果。今天就来介绍一个特别的案例！

🌟 问题场景 ​

当我们需要为不规则形状添加阴影时，传统的 box-shadow 可能会遇到一些限制。比如下面这个带有小三角形的对话框：

html
<style>
.box {
  width: 500px;
  height: 300px;
}
.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: blue;
  box-shadow: 1px 1px 10px #000;
}
.wrap::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  background-color: blue;
  box-shadow: 1px 1px 10px #000;
}
</style>

<div class="box">
  <div class="wrap"></div>
</div>

🤔 存在的问题 ​

使用传统的 box-shadow 方案会导致：

  1. 主体和小三角的阴影不连贯
  2. 需要分别为两个元素设置阴影
  3. 视觉效果不够自然

✨ 完美解决方案 ​

使用 filter: drop-shadow() 可以完美解决这个问题：

css
.wrap {
  /* 移除之前的 box-shadow */
  filter: drop-shadow(1px 1px 10px #000);
  /* 确保背景色是实色 */
  background-color: blue;
}

💡 为什么 drop-shadow 更好？ ​

  1. 像素级阴影：drop-shadow 是基于元素的实际显示内容（包括透明区域）生成阴影
  2. 统一处理：无需为子元素单独设置阴影
  3. 更自然的效果：生成的阴影更符合真实世界的视觉效果

⚠️ 使用注意事项 ​

  1. 父元素背景必须是透明的
  2. drop-shadow 的性能消耗可能比 box-shadow 更大
  3. 参数设置：
    • 第一个值：水平偏移
    • 第二个值：垂直偏移
    • 第三个值：模糊半径
    • 第四个值：阴影颜色

🎯 适用场景 ​

  • 不规则形状的对话框
  • 带小箭头的提示框
  • SVG 图形
  • 带透明区域的 PNG 图片

🌈 扩展应用 ​

除了基础用法，drop-shadow 还可以：

css
/* 多重阴影效果 */
.multiple-shadow {
  filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.3))
          drop-shadow(2px 2px 10px rgba(0,0,0,0.2));
}

/* 彩色阴影效果 */
.colored-shadow {
  filter: drop-shadow(2px 2px 5px rgba(255,0,0,0.5));
}

🔍 浏览器兼容性 ​

  • ✅ Chrome 17+
  • ✅ Firefox 35+
  • ✅ Safari 6+
  • ✅ Edge 12+
  • ❌ IE (不支持)