按钮悬停光晕扩散需确保伪元素与深色背景重叠且不被层叠上下文隔离，推荐用position: relative+::after径向渐变配合mix-blend-mode: screen/overlay，并用@supports做兼容降级。
按钮悬停时用 mix-blend-mode 做光晕扩散效果
直接用 mix-blend-mode 叠加伪元素容易失效，关键不是加不加，而是叠在哪一层、背景是否支持混合。浏览器只对「重叠且非隔离」的元素生效，所以按钮本身不能设 isolation: isolate，父容器也别设 transform 或 filter（会触发层叠上下文，切断混合链）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮用
position: relative，伪元素::after绝对定位覆盖，background: radial-gradient(circle, #fff8, #0000) -
mix-blend-mode: screen或overlay，配合深色背景才明显；浅底色下换multiply试试 - 别给伪元素加
opacity—— 会削弱混合强度，改用渐变透明度或rgba()控制 - 移动端 Safari 对
mix-blend-mode支持不稳定，加@supports (mix-blend-mode: screen)做降级
用 mask-image 实现边缘溶解/波纹入场动效
mask-image 不是“遮罩图”，而是「像素级透出控制」，它吃的是 alpha 通道，不是颜色值。常见错误是拿 PNG 遮罩图直接塞进去，结果动不了——因为静态图无法过渡，必须用 radial-gradient 或 conic-gradient 配合 transition 或 @keyframes。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 溶解入场：初始
mask-image: radial-gradient(circle at center, black 0%, transparent 70%)，悬停时改半径到120%，配合transition: mask-image 0.4s ease-out - 波纹效果：用
conic-gradient(from 0deg, #000 0%, #000 25%, transparent 25%, transparent 50%)，再通过animation转动background-position模拟波纹扩散 - Chrome 115+ 支持
mask-border，但 Safari 目前只认-webkit-mask-image，记得双写 - 别用
mask-image处理文字按钮——字体抗锯齿会让边缘发虚，优先用clip-path做硬边裁切
按钮点击反馈与混合模式冲突怎么解
点下去瞬间要缩放+变色+混合发光，但 transform 和 mix-blend-mode 同时触发常导致闪烁或跳帧。根本原因是 GPU 渲染层切换时机错乱，尤其在伪元素叠加多个 blend 层时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把点击态（
:active）的transform和background改成单层变更，避免同时改mix-blend-mode和opacity - 用
will-change: transform提前声明，但仅对真正需要动画的元素加，否则拖慢渲染 - Safari 下
:active伪类有时不触发，补一个ontouchstart的 class 切换更稳 - 如果用了
mask-image，点击时别改mask-size—— 它不支持 transition，得用@keyframes+mask-position替代
兼容性兜底：没有 mask-image 或 mix-blend-mode 怎么办
IE 全灭，旧版 Edge 和 Android 4.x WebView 也不支持。不能靠 JS 检测后加载 polyfill（没用），得用 CSS 层级降级：用 @supports 包住炫酷效果，外面写朴素但可靠的 fallback。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先写基础按钮样式（圆角、阴影、过渡色），再用
@supports (mask-image: url()) and (mix-blend-mode: screen)包裹动效代码 - fallback 不必“简陋”，比如用
box-shadow: 0 0 12px rgba(255,255,255,0.6)模拟光晕，比纯色按钮体验好得多 - 别用 SVG
<mask>替代 CSSmask-image—— 加载慢、内联复杂、无法 transition - 真要全兼容，就放弃动态遮罩，改用两套图片资源 +
background-image切换，JS 控制 class
混合模式和遮罩不是开关式功能，它们依赖渲染管线的特定阶段。动效卡顿、边缘发灰、Safari 白屏，往往不是代码写错，而是某一层无意中创建了层叠上下文或触发了合成器切换。调的时候盯住 DevTools 的 Layers 面板，比反复改 CSS 更快。
