Skip to content
此页目录
本文总阅读量

CSS3 渐变

线性渐变

css
background: linear-gradient(角度,颜色);
/* 关键字:left right top bottom */
/* 角度值:角度的单位  deg */

重复线性渐变

css
background: repeating-linear-gradient(角度,颜色 颜色的起始位置)
/* 渐变的值可以设置一个或多个,多个值列表之间用【逗号】隔开 */

径向渐变

background:radial-gradient(中心点,颜色);

中心点取值-关键字:center

css
background-image: radial-gradient(circle, red, yellow, green); /* 不同尺寸大小关键字的使用: */
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);

重复径向渐变

css
background:repeating-radial-gradient(中心点,颜色 颜色的起始位置)

评论