用包裹容器+定位伪元素实现自适应暗角：父容器设position:relative，伪元素用inset:0和--fade-distance>100%确保覆盖，img加display:block消除留白，--darken-alpha控制透明度，pointer-events:none保障交互。
直接用 radial-gradient 给图片加暗角，核心不是“套一层遮罩”，而是让伪元素精准覆盖、渐变参数可调且不破坏交互——否则容易黑边生硬、缩放错位、点击失效。
为什么直接 background: radial-gradient() 到 img 上不管用
因为 img 元素的 background 属性会被自身内容（即图片）完全遮盖，渐变根本不可见；同时 img 不支持 ::before/::after 伪元素。必须用包裹容器 + 定位伪元素的方式实现。
- 常见错误：对
background: radial-gradient(...)→ 渐变被图片压底，完全不可见 - 正确路径：外层
div - 父容器必须设
position: relative，否则::before会脱离文档流，飘到页面顶部
怎么写才能让暗角随图片缩放自适应
关键在三点：用 inset: 0 替代 top/left/right/bottom，把 --fade-distance 设为大于 100% 的百分比，且 img 加 display: block 消除底部留白。
-
inset: 0比top: 0; left: 0; width: 100%; height: 100%更可靠，尤其在object-fit: cover场景下不会因裁剪而漏边 - 当图片被
cover裁剪时，暗角边缘若只设70%会卡在裁剪边界内，看起来像“没晕开”；改用--fade-distance: 180%才能让渐变自然溢出到可视区域边缘 -
img默认是 inline 元素，底部有基线留白；不加display: block会导致伪元素底部对不齐，暗角下缘出现白缝
如何安全地用 CSS 变量控制暗角强度
var(--darken-alpha) 和 var(--fade-distance) 可以动态替换，但仅限颜色值和百分比停点位置；circle at center 这类语法结构不能变量化，否则整条声明失效。
- ✅ 安全写法：
radial-gradient(circle at center, rgba(0,0,0,var(--darken-alpha)) 0%, transparent var(--fade-distance)) - ❌ 失效写法：
radial-gradient(var(--shape) at var(--pos), ...)→ 浏览器直接忽略整条渐变 -
--darken-alpha建议范围 0.2–0.6：低于 0.2 几乎不可见，高于 0.6 易显脏灰 -
--fade-distance推荐 120%–200%，具体取决于容器宽高比和裁剪程度；固定写死 70% 在响应式布局中大概率错位
容易被忽略的 pointer-events 和图层顺序
伪元素默认会拦截鼠标事件，导致图片无法右键保存、无法触发 click 或 hover；同时如果没设 z-index，可能被其他元素盖住。
- 必须加
pointer-events: none，否则用户点不到图片本身 - 伪元素默认堆叠层级低于父容器子元素，若容器里还有文字或按钮，需加
z-index: 1并确保父容器z-index为 auto 或数值 - 不要用
opacity控制暗角浓淡——它会让整个伪元素透明，包括本该完全透明的中心区，破坏渐变逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
