一、线性渐变
语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ...); //重复绘制渐变
- 第一个参数:
direction
:方向,可选,默认为从上到下
- 第二个参数:
start-color
:定义开始颜色
stop-color
:定义结束颜色
1. 第一个参数
第一个参数为空时默认方向为从上到下
。例如:
background-image: linear-gradient(#69f, #fd44ff);
显示的效果为:

- 方向的关键字为:
to bottom
:从上到下
to right
:从左到右
to left
:从右到左
to top
:从下到上
to top left
:从右下角到左上角
to top right
:从左下角到右上角
to bottom left
:从右上角到左下角
to bottom right
:从右下角到左上角
例如:
background-image: radial-gradient(to right, #69f, #fd44ff);
background-image: radial-gradient(to top right, #69f, #fd44ff);
该代码同时可以用角度
写为:
background-image: radial-gradient(90deg, #69f, #fd44ff);
background-image: radial-gradient(45deg, #69f, #fd44ff);
显示效果如下:

2. 第二个参数
第二个参数为颜色 & 位置,颜色可为多个,每个颜色可写2个位置的值。
每个颜色的位置对应的是该颜色的起始过渡颜色。如:
background-image: linear-gradient(#69f 20%, #fd44ff);
background-image: linear-gradient(#69f 50%, #fd44ff);
background-image: linear-gradient(#69f 20%, #fd44ff 80%);
background-image: linear-gradient(#69f 50%, #fd44ff 50%);
显示效果为:

我们还可以配置多种颜色,及颜色都配置起止值,例如:
background-image: linear-gradient(#69f 25%,#fd44ff 50%,#f64f59 75%, #fbd786);
background-image: linear-gradient(#69f 25%,#fd44ff 20% 50%,#f64f59 50% 75%, #fbd786 75%);
}
以上代码显示的效果分别如下:

3. 重复渐变
重复渐变用于创建重复的线性渐变 "图像"。
利用重复的渐变,我们可以实现loading效果:
.loading{
margin: 100px;
width: 400px;
height: 20px;
background: repeating-linear-gradient(45deg, #fff, 20%, #000 20% 40%);
background-size: 20%;
border: solid 1px #000;
animation: run 5s linear infinite both;
}
@keyframes run{
0%{
background-position: 0 0;
}
100%{
background-position: 100% 0;
}
}

以及重复的线条,比如棋盘。
.chess {
width: 300px;
height: 300px;
background: #eac991;
background-image: repeating-linear-gradient(transparent 0 19px, #333 20px), repeating-linear-gradient(to right, transparent 0 19px, #333 20px);
border: solid 3px #333;
border-radius: 3px;
position: relative;
&:after{
width: 15px;
height: 15px;
position: absolute;
border-radius: 50%;
background: #000;
content: '';
left:92px;
top: 92px;
box-shadow: 0 22px 0 #000, 20px 22px 0 #fff, 20px 41px 0 #fff, -20px 22px 0 #fff, -20px 41px 0 #000, 41px 41px 0 #000
}
}

地址:https://codepen.io/jianxiujiucan/pen/poJzxVP
二、径向渐变
语法:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);
-
第一个参数:
shape
:shape定义形状(圆形或椭圆),可选,默认为椭圆
size
:半径大小,可选
position
:定义圆心位置,可选,默认为形状的中心点 -
第二个参数:
start-color
:定义开始颜色
stop-color
:定义结束颜色
1. 第一个参数
1.1 第一个参数可忽略不写,为空时默认为椭圆
,圆心位置为形状的中心
,半径为形状的对角线的一半
。
例如:
background-image: radial-gradient(#69f, #fd44ff);
以上代码等同于:
background-image: radial-gradient(ellipse, #69f, #fd44ff);

1.2 shape
:如果我们要设置为圆形,则加关键字cricle
:
background-image: radial-gradient(cricle, #69f, #fd44ff);

1.3 size
:如果写一个参数则为圆形,写两个参数(参数值不相同)则为椭圆:
background-image: radial-gradient(100px, #69f, #fd44ff); //半径为100px的圆
background-image: radial-gradient(200px 100px, #69f, #fd44ff); //长轴为200px,短半轴为100px的椭圆

1.4 position
:圆心位置,位置的数值可以为:at center
、 at top
、 at right
、 at bottom
、at left
、at top left
、at top right
、at bottom left
、 at bottom right
。
例如:
background-image: radial-gradient(at top, #69f, #fd44ff); // 圆心在顶端中间位置
background-image: radial-gradient(at top right, #69f, #fd44ff); // 圆心在右上角位置
如图所示:

圆心位置也可以为具体数值
,上面代码等同于:
background-image: radial-gradient(at 150px 0, #69f, #fd44ff);
background-image: radial-gradient(at 300px 0, #69f, #fd44ff);
我们还可以指定渐变终止点位置(closest-side
、closest-corner
、farthest-side
、farthest-corner
)。
closest-side 渐变中心距离容器最近的边作为终止位置。
farthest-side 渐变中心距离容器最远的边作为终止位置。
closest-corner 渐变中心距离容器最近的角作为终止位置。
farthest-corner 渐变中心距离容器最远的角作为终止位置。
如果为空,则默认的值为farthest-corner
。
- 我们先来看看渐变中心离容器以边做为终止位置的代码及效果(容器大小为200*200):
//渐变中心距离容器最近的边作为终止位置,本例为30px
background-image: radial-gradient(closest-side circle at 30px 60px, #69f, #fd44ff);
//渐变中心距离容器最远的边作为终止位置,本例为200px-60px=140px
background-image: radial-gradient(farthest-side circle at 30px 60px, #69f, #fd44ff);
示例图如下:

- 渐变中心离容器以角做为终止位置的代码及效果(容器大小为200*200):
//渐变中心距离容器最近的角作为终止位置,本例为Math.sqrt(30*30+60*60)≈67px(勾股定理算出)
background-image: radial-gradient(closest-side circle at 30px 60px, #69f, #fd44ff);
//渐变中心距离容器最近的角作为终止位置,本例为Math.sqrt(30*30+60*60)≈220px(勾股定理算出)
background-image: radial-gradient(farthest-side circle at 30px 60px, #69f, #fd44ff);

2. 第二个参数
第二个参数如同线性渐变,为颜色 & 位置,颜色可为多个,每个颜色可写2个位置的值。
例如:
background-image: radial-gradient(#69f 25%,#fd44ff 50%,#f64f59 75%, #fbd786);
background-image: radial-gradient(#69f 25%,#fd44ff 20% 50%,#f64f59 50% 75%, #fbd786 75%);
显示效果如下:

那么我们可以来画一道彩虹。
.rainbow{
width: 400px;
height: 200px;
background-image: radial-gradient(at center bottom, transparent 20%,#cc419c 20% 25%,#4d81ee 25% 30%,#03dbda 30% 35%, #81e745 35% 40%,#f6fc5e 40% 45%, #fea805 45% 50%, #fe6859 50% 55%, transparent 55%);
}
效果如下:

地址:https://codepen.io/jianxiujiucan/pen/JjdPeGV
三、圆锥渐变
语法:
background-image: conic-gradient(from angle at position, start-color, ..., last-color )
- 第一个参数:
from angle
:起始的角度,可选,默认为从上到下
position
:圆锥锥点的位置 - 第二个参数:
start-color
:定义开始颜色
stop-color
:定义结束颜色
1.第一个参数
同样的,第一个参数可以为空,默认的角度为0deg
,锥心为形状的 中心点
。例如:
background-image: conic-gradient(#69f, #fd44ff);

我们可以改变起始的角度,如:
background-image: conic-gradient(from -90deg, #69f, #fd44ff);

改变锥心位置:
background-image: conic-gradient(from -90deg at 80px 120px, #69f, #fd44ff)

2. 第二个参数
与线性、径向渐变一样,可以设颜色及渐变的起始位置。位置接受的参数有百分比和角度。例如:
background-image: conic-gradient(#69f 10%, #fd44ff 10%);
以上代码等同于:
background-image: conic-gradient(#69f 36deg, #fd44ff 36deg);
显示效果如下:

3. 重复圆锥渐变
与线性、径向渐变一样,圆锥渐变也有重复的属性。
background-image: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
效果如图:

这个效果图是不是有一点点熟悉的感觉呢?
我们来把它设置成圆形,加一个按钮,就是一个抽奖圆盘了。
效果如下:

地址:https://codepen.io/jianxiujiucan/pen/bGddbez
我们可以用圆锥做各式各样的loading效果:

地址:https://codepen.io/jianxiujiucan/pen/bGdGyKN
第二个loading请自己研究一下并写练习哦~
我们可以用渐变来绘制各式各样的效果啦。
比如信:

网友评论