box-shadow 只按元素的盒子上投影,而 drop-shadow 作用于元素的 alpha 通道——PNG 去底图、SVG 图标、带 clip-path 的异形元素的投影都与实际轮廓一致,镂空部分不会出现方块阴影。
用法 filter: drop-shadow(4px 4px 8px rgba(0,0,0,.4))。典型场景:不规则图标加投影、卡通气泡尾巴投影。注意 drop-shadow 性价比不如 box-shadow(要重新计算轮廓),小块元素上用即可。
<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>