UI 渐变 - CSS

简介

UI 渐变是一种常用的设计技巧，可以让页面看起来更加流畅和美观。在 CSS 中，通过使用渐变属性可以实现各种不同的渐变效果。

线性渐变

线性渐变是最基本的渐变类型，通过从一个颜色到另一个颜色按照一定的方向渐变而成。

background: linear-gradient(to right, #ff0000, #0000ff);

上述代码将创建一个从红色到蓝色的水平渐变。

虚线渐变

background: linear-gradient(to right, #ff0000 50%, transparent 50%);

上述代码将创建一个红色对半切割的虚线渐变。

多个颜色

background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);

上述代码将创建一个从红色到绿色再到蓝色的渐变。

径向渐变

径向渐变是以一个中心点为起点，向四周不断变化颜色。不同于线性渐变，径向渐变的起点和终点不是一个颜色和另一个颜色，而是从一个中心点开始径向变化。

background: radial-gradient(circle at 50% 50%, #ff0000, #0000ff);

上述代码将创建一个以页面中心为中心，从红色到蓝色相变的径向渐变。