CSS3 词条目录
前端Wiki/词条/drop-shadow 滤镜投影

drop-shadow 滤镜投影

定义filter 滤镜家族中的投影:跟随元素「实际形状」(含透明)投影,而非方框

box-shadow 只按元素的盒子上投影,而 drop-shadow 作用于元素的 alpha 通道——PNG 去底图、SVG 图标、带 clip-path 的异形元素的投影都与实际轮廓一致,镂空部分不会出现方块阴影。

用法 filter: drop-shadow(4px 4px 8px rgba(0,0,0,.4))。典型场景:不规则图标加投影、卡通气泡尾巴投影。注意 drop-shadow 性价比不如 box-shadow(要重新计算轮廓),小块元素上用即可。

HTML
<style>
  .ico { filter: drop-shadow(3px 5px 6px rgba(74,158,255,.6)); }
  .cut { clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 70%, 60% 100%, 0 100%);
         background: #f778ba; width: 120px; height: 110px;
         filter: drop-shadow(4px 4px 6px rgba(0,0,0,.35)); }
</style>
<div class="cut"></div>
⚠ 常见误区
🔗 相关词条box-shadow 阴影filter 滤镜与混合模式
← 返回来源章节filter 滤镜与混合模式