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、SVGmask的r全部改用vmin（取vw和vh较小者） - 例如：
drop-shadow(0 0 calc(15vmin) calc(5vmin) #000)，这样在手机横屏和竖屏下都能保持比例一致 - 注意：
vmin在旧版 Android WebView 中支持有限，如需兼容可降级为 JS 监听resize动态写内联 style
暗角不是越深越好，过度压缩边缘亮度反而削弱主体立体感；真正难的是在不同设备上保持视觉权重一致——这取决于你选的基准单位和是否监听了视口真实变化。
