CSS 渐变 - 技术栈

CSS 渐变

海胆Sur2023-11-23 10:50

linear-gradient() 线性渐变

css 复制代码

/* 渐变轴为 45 度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* to [left/right] [top/bottom] */

/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */
linear-gradient(.25turn, red, 10%, blue);

/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

repeating-linear-gradient()

重复渐变的长度是第一个色标和最后一个色标之间的距离。

radial-gradient() 辐射渐变

css 复制代码

radial-gradient(circle at center, red 0, blue, green 100%)

conic-gradient() 锥形渐变

css 复制代码

/* conic-gradient(from 90deg [at 0 0], blue, red); */