linear-gradient() 的方向参数必须带 to 关键字，如 to top；角度值须带单位（如 45deg）；色标位置可手动设置以控制视觉节奏；透明色需配合 background-color 才可见；多色渐变需结合容器尺寸与设备像素比校准。
linear-gradient() 的方向参数必须带 to 关键字
不写 to，比如直接写 top 或 right，在现代浏览器里大概率失效——Safari 16.4+、Chrome 115+、Firefox 110+ 都已移除对无 to 前缀旧语法的支持。只有 to top、to right、to bottom left 这类才是可靠写法。
角度值也一样：漏掉单位（如写成 45 而不是 45deg）会让整个声明被忽略，连带后面的颜色停靠点都不生效。
-
to bottom是默认行为，可省略，但显式写出更利于团队协作和后期维护 -
to bottom right和to right bottom效果不同：前者是左上→右下，后者解析为无效语法（顺序错乱） - 避免混用：不要在一个声明里同时写
to right和90deg，浏览器会优先按角度处理，to关键字被丢弃
色标位置不写百分比，浏览器会自动均分
写 linear-gradient(to right, red, yellow, green) 等价于 red 0%, yellow 50%, green 100%，但人眼常觉得黄色“一闪而过”。这不是 bug，是插值逻辑使然：三色等距分布，中间色实际只占视觉宽度的 1/2 区间，过渡段又进一步压缩了停留感。
要拉宽某一段颜色，就得手动设位置：
-
red 0%, yellow 20%, green 100%：黄色提前出现，且从 20% 到 100% 全是黄→绿过渡，视觉上更饱满 - 用像素值也合法：
red 0px, yellow 40px, green 200px，适合固定宽高的容器（如按钮、徽章） - 制造硬切效果：
#333 50%, #333 50.1%，两个相同颜色紧挨着，中间无过渡
透明色在渐变里“看不见”通常是因为没配 background-color
linear-gradient() 生成的是图像层，它本身不决定最终是否透明——它只是画了一张图。如果你用了 transparent 或 rgba(0,0,0,0.3)，但父容器或自身没有设置 background-color，那“透明”部分就会透出父级背景，看起来像“没渲染出来”。
常见误操作：
- 只写
background-image: linear-gradient(to right, red, transparent)，没设background-color→ 透明区直接透底，若底色是白色就看不出来渐变结束 - 用
border-style: solid却忘了给border-color，导致边框区域盖住渐变边缘 - 在
background复合属性里漏掉 fallback 颜色：background: linear-gradient(...), #fff比background: linear-gradient(...)更稳妥
多色渐变的节奏控制比想象中更依赖视觉校准
百分比数值不是“设计稿标注”，而是渐变轴上的坐标点。同一组数值，在不同尺寸容器里视觉感受可能完全不同——小按钮上 30% 的黄色很醒目，大横幅上可能就糊成一条线。
实操建议：
- 先用固定宽高容器（如
width: 200px; height: 40px;）调试色标位置，再迁移到响应式布局 - 别迷信“黄金比例”：33%/66% 不一定比 25%/75% 更协调，打开 DevTools 实时拖动百分比微调
- 注意设备像素比：Retina 屏下 1px 偏移可能肉眼不可见，但 0.5% 百分比偏移反而更可控
渐变不是设完参数就完事的静态配置，它得跟着容器尺寸、使用场景、甚至文字对比度一起调。最易被忽略的，其实是“改完之后没在真机上滑动看动态效果”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
