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

lineargradient() 线性渐变

/* 渐变轴为 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() 辐射渐变

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

conic-gradient() 锥形渐变

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

原文地址:https://blog.csdn.net/I_fole_you/article/details/123071537

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_560.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注