linear-gradient 必须显式声明颜色停靠位置，否则浏览器等距分配；radial-gradient 圆心需用 at 显式定位；background-image 浮于 background-color 上；clip-path 与渐变组合时 SVG 方案更锐利。
linear-gradient 里漏写颜色断点位置，背景就不是你想要的
多色不规则背景不是靠“多写几个颜色”就行，关键在每个颜色后必须显式声明停靠位置，否则浏览器按等距分配，三色会变成 0%–33%–66%–100%，根本卡不住你要的分界点。
-
linear-gradient(to right, #f00, #0f0, #00f)→ 等距三段，无法控制蓝从哪开始 -
linear-gradient(to right, #f00 0%, #f00 30%, #0f0 30%, #0f0 70%, #00f 70%, #00f 100%)→ 真正可控的硬分段 - 想软过渡？把交界点拉开：比如
#f00 28%, #0f0 32%，留出 4% 缓冲区 - 单位混用（
#f00 0%, #0f0 100px）在 Safari 16.6 中可能直接失效，统一用百分比最稳
radial-gradient 的圆心偏移常被忽略，尤其在有 padding 的容器里
默认 radial-gradient(circle, #f00, #00f) 的圆心是 content box 中心，但如果你的容器写了 padding: 20px，视觉上渐变就往里缩了——这不是 bug，是盒模型计算逻辑。
- 用
radial-gradient(circle at 30% 40%, #f00, #00f)显式定位，数值从左上角起算，不受 padding 影响 - 避免
closest-side这类关键字：窗口缩放时半径跳变，iOS Safari 容易闪屏 - 如果要“从按钮文字中心发散”，纯 CSS 做不到，得用 JS 获取
getBoundingClientRect()动态注入 style
background-image 和 background-color 的层叠顺序必须理清
渐变是 background-image，它永远浮在 background-color 上面；只写 background: linear-gradient(...) 等价于 background-color: transparent，一旦容器没设高度或内容坍缩，就会露白底。
- 稳妥写法：
background-color: #333; background-image: linear-gradient(45deg, #f00, #0f0); - 用简写
background时，background-color必须写在渐变前，否则会被覆盖 - 透明底色不是不要
background-color，而是确保容器有明确height或min-height，否则渐变区域无处渲染
clip-path + 渐变组合时边缘发虚，别只靠 transform 强制 GPU
当 clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%) 和 linear-gradient 一起用，在 MacBook Retina 屏上常出现毛边——这是亚像素渲染误差，不是代码写错。
-
transform: translateZ(0)能缓解但不根治，且可能引发额外重绘开销 - 真正稳的方案：把渐变定义在 SVG
- 对
clip-path+object-fit，两者冲突会导致图像拉伸+裁剪错位
实际最难的不是写出一个五边形渐变，而是让这个五边形在 Safari、Firefox、Chrome 下边缘都锐利，且 viewport 缩放到 80% 时不崩形——这时候你得盯住单位类型、父级 overflow 设置，以及是否意外触发了 subpixel rendering。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
