丝绒质感核心是微弱明暗过渡与吸光错觉，CSS中用多层radial-gradient叠加mix-blend-mode:multiply模拟绒毛阴影，需控制中心偏移、低对比度、px单位适配高分屏。
丝绒质感的核心不是颜色本身，而是微弱的、方向性不强的明暗过渡 + 表面“吸光”错觉——CSS 里靠 radial-gradient 搭配 mix-blend-mode: multiply 或 overlay 最贴近实际效果，而不是单纯调饱和度或加噪点。
用多层 radial-gradient 模拟丝绒的“绒毛阴影”
丝绒表面看似均匀，实则由无数微小倾斜绒毛构成，光照下形成密集、柔和、无明确光源方向的局部明暗。单层径向渐变太“干净”，必须叠加 2–3 层不同中心、不同尺寸、极低对比度的渐变来模拟这种随机感。
关键参数控制：
-
radial-gradient(circle at 30% 40%, #5a2a2a 0%, #4a1a1a 70%, transparent 100%)：偏移中心避免机械对称，70% 截断防止晕染过重 - 第二层用
ellipse at 65% 25%，颜色差缩小到 ΔL ≈ 8（如#4d1e1e → #471919），半径扩大 1.3 倍 - 第三层用极淡灰黑（如
rgba(0,0,0,0.03)）全幅覆盖，background-size: 300% 300%配合background-position: center制造微妙浮动感
mix-blend-mode: multiply 比 overlay 更适合深色丝绒
丝绒在深色基底上最显质感，而 multiply 能自然压暗叠加层、保留暗部细节，且不抬高高光——这比 overlay 更符合真实吸光特性。但注意它只对非 transparent 的背景生效：
立即学习“前端免费学习笔记（深入）”；
- 父容器需设明确背景色（如
background-color: #2c1810），不能依赖 body 默认色 - 渐变层自身不能设
background-color，否则会遮盖混合效果 - 若需在浅色背景上用，改用
mix-blend-mode: overlay并把渐变色调整为中灰系（如#b0a090 → #9a8a7a）
避免用 filter: noise() —— CSS 还不支持
很多人想加噪点模拟绒毛颗粒，但目前所有浏览器都不支持 filter: noise(1%) 这类语法。试图用 SVG <feturbulence></feturbulence> 或 Canvas 生成再贴图，反而破坏性能且难以响应式缩放。真正轻量的替代方案是：
- 用极小尺寸的 PNG 纹理（如 4×4 像素，带轻微明暗噪点），
background-image: url(...), radial-gradient(...)多层叠加 - 或用
background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,0.02) 1px, rgba(0,0,0,0.02) 2px)模拟极细网格，再叠渐变 - 切记：任何纹理图都必须设
background-size: 2px 2px或更小，并配合background-attachment: fixed防止滚动时错位
丝绒效果最易被忽略的是「动态响应」：当用户缩放页面或切换设备像素比时，radial-gradient 的模糊半径会失真。解决方法只有一个——所有渐变尺寸统一用 px（不用 % 或 em），并在 @media (-webkit-min-device-pixel-ratio: 2) 里把尺寸 ×2，否则高分屏下绒毛感直接消失。
