CSS 渐变

怎么用

1. 选渐变类型：线性或径向。
2. 线性渐变设置角度（度），90 度是从上到下。
3. 用取色器添加色标，初始两个，点「添加颜色」最多到六个；色标均匀分布。
4. 改任何参数实时预览都会跟着变，满意后从代码框复制成品 CSS。

常见用法

• 按钮与横幅 —— 给行动按钮铺一层平滑的双色过渡，替代死板的纯色填充。
• 首屏背景 —— 在标题文字后面垫一层克制的径向光晕。
• 图表与看板 —— 给需要渐变填充的数据系列搭一套一致的分类色带。
• 学 CSS —— 直观看到角度值和色标位置如何改变最终渲染。

常见问题

问：为什么径向模式下角度框不见了？ 答：径向渐变从中心向外扩散，没有方向概念。角度只对线性渐变有意义，它控制色线往哪个方向走。

问：色标位置是怎么定的？ 答：色标在渐变里均匀分布，三个颜色就是 0%、50%、100%。想要自定义间距，复制 CSS 后直接改百分比即可，语法是标准写法，文档很全。

问：输出能用在预处理器或框架里吗？ 答：可以。输出就是一条标准的 background-image 声明，纯 CSS、内联样式、Sass、Tailwind 任意值、CSS-in-JS 都能直接用。