linear-gradient()方向须用to side-or-corner格式（如to bottom），禁用旧语法top；色标需手动设百分比或像素值控制过渡节奏；透明色需配合background-color和border-style:solid才能正常显示。
linear-gradient() 的方向参数怎么写才不翻车
方向写错，渐变会完全偏离预期——不是颜色没出来，是“出来得不对”。to top 和 top 看似差不多，但前者是标准语法，后者在旧版 WebKit 里曾被支持，现在多数浏览器已弃用；用 top 会导致部分 Safari 或老 Edge 不渲染渐变。
推荐统一用 to <side-or-corner></side-or-corner> 形式：
-
to bottom：从上到下（默认行为，可省略） -
to right：从左到右 -
to bottom right：从左上角到右下角（对角线） - 避免用角度值如
45deg时写成45（漏掉deg单位），这会让整个声明失效
多个色标之间如何控制过渡节奏
色标位置不是“平均分配”，而是按百分比或长度值手动指定，否则浏览器会匀速插值，导致某段颜色过快消失、另一段淤积。比如 linear-gradient(to right, red, yellow, green) 会让红→黄、黄→绿各占 50%，但人眼常觉得黄色太窄。
加位置锚点就能修正：
-
red 0%、yellow 30%、green 100%：黄色提前出现，且占据更宽视觉区域 - 用像素值如
red 0px、yellow 20px也合法，适合固定尺寸容器内的精确控制 - 两个相同颜色+不同位置可制造“硬切”效果，比如
#333 50%, #333 50.1%
透明色和半透色在渐变里为什么有时看不见
不是代码错了，是叠加逻辑没理清：linear-gradient() 本身不带 opacity，它生成的是一个图像层，最终是否透明，取决于你把它用在哪儿。
常见误操作：
- 把
rgba(255,0,0,0.3)当作背景时，父容器没设background-color，底下又是白色——半透红就“融”进去了 - 和
background-image其他图层叠用时，没配background-color: transparent，导致底色盖掉渐变透明通道 - 用在
border-image上时，border-style必须是solid，否则渐变不显示（dashed或dotted会直接退化）
兼容性陷阱：哪些写法现代浏览器都认，但微信内嵌浏览器不行
微信 Android 客户端（尤其 8.0.33 之前）对 CSS 渐变的解析极保守：它不支持空格分隔的多关键字方向（如 to bottom right），也不认 hsl() 或 hwb() 颜色函数里的渐变色标。
稳妥方案：
- 方向统一用角度值，如
135deg代替to bottom right - 所有颜色用
rgb()、hex或命名色，避开hsl(120, 100%, 50%)这类 - 必要时加一层降级：
background-color: #ff6b6b; background-image: linear-gradient(...)，确保至少有单色兜底
渐变本身没“复杂度上限”，但色标一多、方向一斜、再叠个 background-size 缩放，不同引擎的像素对齐策略就开始打架——这时候别猜，打开开发者工具的“渲染面板”，勾选“Paint flashing”，看哪块真在重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
