17370845950

drop-shadow() 是最轻量纯 CSS 暗角方案，原理是用巨大模糊黑影配合 overflow: hidden 截取亮区；关键参数为 drop-shadow(0 0 120px 40px #000)，需父容器设 overflow: hidden 且主体有明确宽高；兼容 Safari 9+、Chrome 53+、Firefox 52+，IE 不支持。

用 filter: drop-shadow() 模拟暗角最轻量

纯 CSS 实现暗角，不需要 Canvas 或 SVG，drop-shadow() 是最简方案。原理是给容器加一个巨大、模糊、全黑的阴影，再用 overflow: hidden 截掉中间亮区。

• 适用场景：静态页面、响应式布局、主体为居中块级元素（如图片、卡片）
• 关键参数：drop-shadow(0 0 120px 40px #000) 中，前两个 0 表示无偏移，120px 控制模糊程度（越大越柔和），40px 是扩张半径（越大暗角越深）
• 必须配合：overflow: hidden 在父容器上，否则阴影会溢出；主体需有明确宽高或 max-width，否则暗角不可控
• 注意兼容性：drop-shadow() 在 Safari 9+、Chrome 53+、Firefox 52+ 支持良好，IE 完全不支持

Canvas 绘制渐变暗角更精准可控

需要动态调整暗角强度、位置或适配不规则主体时，Canvas 是更可靠的选择。核心是用 createRadialGradient() 覆盖四角。

• 典型步骤：getContext('2d') → createRadialGradient(x, y, r1, x, y, r2)（中心点设在主体中心，r1 接近 0，r2 略大于主体对角线）→ 设置 gradient.addColorStop(0, 'rgba(0,0,0,0)') 和 addColorStop(1, 'rgba(0,0,0,0.7)')
• 容易踩的坑：radialGradient 坐标是相对于 Canvas 原点，不是页面；若 Canvas

  

  未设置 width/height 属性（非 CSS），绘图会拉伸失真
• 性能提示：避免每帧重绘；暗角可预渲染到离屏 canvas，再 drawImage() 合成

clip-path + mask 组合实现非圆形暗角

当你要的是矩形收缩、菱形压暗，或想避开某个区域（比如右上角 logo），clip-path 单独不够，得靠 mask 图层叠加。

• mask 推荐用内联 SVG： —— 黑底白圆，白色区域透出原内容
• clip-path 可先裁出主体安全区，再用 mask 叠加暗角，二者分工：裁剪控制形状，遮罩控制明暗过渡
• 风险点：mask 在 Firefox 中需加 -webkit-mask 前缀才能生效；Safari 对 mask-type: luminance 支持不稳定，建议统一用 alpha

暗角强度随视口缩放失效？用 vw/vmin 动态单位

固定像素值的暗角在移动端或缩放页面下会“错位”——角太浅或太浓。根本原因是暗角尺寸没跟视口联动。

• 替换方案：把 drop-shadow 的模糊/扩张值、Canvas 中的 r2、SVG mask 的 r 全部改用 vmin（取 vw 和 vh 较小者）
• 例如：drop-shadow(0 0 calc(15vmin) calc(5vmin) #000)，这样在手机横屏和竖屏下都能保持比例一致
• 注意：vmin 在旧版 Android WebView 中支持有限，如需兼容可降级为 JS 监听 resize 动态写内联 style

暗角不是越深越好，过度压缩边缘亮度反而削弱主体立体感；真正难的是在不同设备上保持视觉权重一致——这取决于你选的基准单位和是否监听了视口真实变化。