视觉进阶的四件工具：多形状渐变、filter、mask/clip-path、blend

① 渐变：径向、锥形与多层叠加

radial-gradient(circle at 30% 30%, …)
椭圆：显式写 80% 50% 半径
conic-gradient(from 45deg, …) 色相环
repeating-conic-gradient 放射纹
环形进度：conic + mask 挖中心
三层叠加：高光 + 细纹 + 底色
/* 环形进度条：纯 CSS，无 SVG、无 JS */
.ring { background: conic-gradient(var(--brand-500) 0 var(--pct), #eaeef2 var(--pct) 100%);
        border-radius: 50%;
        mask: radial-gradient(circle, transparent 0 55%, #000 56%); }
/* 色相环 / 饼图 / 时钟面 都能用 conic 的色标比例表达 */

② filter：作用在元素自己的绘制结果上

grayscale(1)
blur(2px)
saturate + contrast + brightness
drop-shadow()：贴着透明轮廓，不像 box-shadow 只按盒子
/* 可串联：filter: grayscale(1) contrast(1.3) blur(1px); */
/* 常用：blur() brightness() contrast() grayscale() hue-rotate() invert() opacity() saturate() sepia() drop-shadow() */
/* 三个副作用：① 创建层叠上下文；② 改变 fixed 的参考系（第十二章）；③ 动画 filter 成本高，模糊半径变化会重绘 */
/* 实用配方：图片 hover 轻微提饱和 + 变亮，比加遮罩更省；禁用态 grayscale(1) + opacity(.6) */

③ backdrop-filter：毛玻璃（作用在「元素背后」）

blur + saturate 两层，配 rgba(255,255,255,.18) 与一条浅色 border，就是可用的玻璃面板。
.glass { background: rgba(255,255,255,.18);
         backdrop-filter: blur(6px) saturate(1.4);
         border: 1px solid rgba(255,255,255,.35); }   /* 描边是让玻璃「看得见边界」的关键 */
/* 三条注意：① 需要 Safari 前缀 -webkit-backdrop-filter；
   ② 背后必须有内容才看得出效果（纯色底上等于白做）；
   ③ 大面积高斯模糊在低端设备上很贵，别给整页背景加。 */

④ mask：用另一张图的 Alpha 决定「哪里可见」

线性渐隐（右侧淡出，比加一层渐变遮罩更省）
径向挖圆
重复条纹
/* mask 的语法与 background 几乎一致：mask-image / mask-size / mask-position / mask-repeat */
.fade-out { mask: linear-gradient(90deg, #000 40%, transparent); }        /* 渐隐 */
.icon { mask: url(star.svg) center/contain no-repeat; background: currentColor; }  /* 用 SVG 当形状，颜色靠 CSS 控制 */
/* mask 与 clip-path 的差别：mask 能表达「半透明过渡」，clip-path 只有硬边界 */
/* 与透明通道有关的操作还有：opacity（整层）、mix-blend-mode（与底色混合）、background-blend-mode（层间混合） */

⑤ clip-path：异形裁剪（硬边界）

polygon 切角卡
circle()
ellipse()
十点多边形（星形）
hover 时裁剪形状可过渡（circle→circle 同函数族才插值得了）
clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);   /* 点数一致的两个多边形之间可以平滑过渡 */
clip-path: inset(0 0 40% 0 round 8px);                        /* 内缩矩形 + 圆角 */
/* clip-path 会裁掉阴影与溢出内容，也会创建层叠上下文（第十二章） */
/* 无障碍：被裁掉的区域里如果有文字，读屏仍能念到 —— 视觉信息丢失要自己兜住 */

⑥ mix-blend-mode 与 background-blend-mode

multiply / screen 叠加三色圆
background-blend-mode: multiply（图片层与渐变层之间）
difference
与背后颜色相减，做反色文字
/* 给图片加深色渐变遮罩而不需要单独一层 div： */
.card::after { content: ""; position: absolute; inset: 0;
               background: linear-gradient(180deg, transparent, rgba(0,0,0,.6)); }
/* 想「只影响这一小块混合」→ 给父级 isolation: isolate 建层叠上下文，避免混合跑到整页 */
/* 常用值：multiply（变暗）/ screen（变亮）/ overlay / difference / exclusion / hue / luminosity */

⑦ 组合练习：不用一张图片做「有质感」的封面

底色 conic 渐变 + ::before 的椭圆高光（再叠 blur）+ ::after 的细密竖纹（overlay 混合）。三层全部是 CSS，导出体积接近 0。

.hero { background: conic-gradient(from 210deg at 30% 20%, #0969da, #8250df, #0a3060, #0969da); }
.hero::before { background: radial-gradient(ellipse at center, rgba(255,255,255,.45), transparent 60%); filter: blur(10px); }
.hero::after  { background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px); mix-blend-mode: overlay; }

但这些技巧都属于「锦上添花」。真实站点的首屏大图仍然应该用 <img> + srcset：能被缓存、能被裁切、能懒加载、能拿到 alt。CSS 视觉只负责那些不需要作为内容存在的部分。