利用css实现渐变色(通俗易懂)

类型	语法
线性渐变	linear–gradient(方向, 颜色1, 颜色2, … ,颜色n)
径向渐变	r a dial–gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小, … )

注：线性渐变的方向可以为：

1、一个方向值时： t o bot t o m 表示从上边到下边

2、两个方向值时： t o right bot t o m 表示从左上角到右下角

径向渐变的覆盖区域大小为百分比，表示该颜色覆盖的范围

例如： radial-gradient(green 30%, yellow 80%);

 表示绿色占了整个区域的30%，黄色占了整个区域的20%，绿色与黄色过渡的部分占了整个区域的50%；

1、线性渐变

线性渐变使用linear-gradient，语法如下：

background-image: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]...);

渐变方向有以下几种值：

使用表示方位的单词

t o top 表示从下往上的方式进行渐变
t o b o t t om 表示从上往下的方式进行渐变
t o right 表示从左往右的方式进行渐变
to left 表示从右往左的方式进行渐变
to top left 表示从右下向左上进行渐变(top和left 可以交换位置，下同)
to top right 表示从左下向右上进行渐变
to bottom left 表示从右上向左下进行渐变
to bottom right 表示从左上向右下进行渐变
使用角度表示，例如0de g等同于to top， 90de g等同于to r i g ht
使用弧度，单位为rad
使用turn，代表环绕圆圈的圈数，0.5turn表示半圈，也就是180de g
使用 grad，表示百分度，400grad表示360d e g

2、径向渐变

径向渐变使用ra dial–gradient，语法如下：

background-image: radial-gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小, … );

2.1 径向渐变

2.1.1 圆形

.box {
	width: 200px;
	height: 200px;
	background-image: radial-gradient(circle, red, blue);
}

效果如下：
在这里插入图片描述

2.1.2 椭圆形

.box {
	width: 200px;
	height: 200px;
	background-image: radial-gradient(ellipse, red, blue);
}

效果如下：
在这里插入图片描述

2.2 重复性径向渐变

.box {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: red;
	/* 针对不支持渐变的浏览器 */
	background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
}

效果如下：
在这里插入图片描述

3、边框颜色渐变

3.1 边框渐变

3.1.1 线性渐变

语法如下：

border-image: linear-gradient(方向，颜色1，颜色2 …) 内向偏移量;

表示盒子有一个从左上角到右下角进行由黄色到绿色的5px宽的渐变边框

//边框的颜色为什么不重要，会被下面覆盖的
border: 5px solid;
//最后面跟的 5 表示内向偏移量，写成和边框设置的宽度一样即可
border-image: linear-gradient(to bottom right,yellow, green) 5;

效果如下：
在这里插入图片描述

3.1.2 径向渐变

语法如下：

border-image: radial-gradient(颜色1 百分比，颜色2 百分比…) 内向偏移量

表示盒子有一个从中心向到外进行由黄色到绿色的5p x宽的渐变边框

//边框的颜色为什么不重要，会被下面覆盖的
border: 5px solid black;
//最后面跟的 5 表示内向偏移量，写成和边框设置的宽度一样即可  
border-image: radial-gradient(yellow 70%, green 130%) 5;

效果如下：
在这里插入图片描述

3.2 单侧边框渐变

3.2.1 底部边框线性渐变

从左到右，由透明开始向蓝色渐变

/*首先我们设置边框只显示底部，宽度为5px的实线。*/
border-bottom: 5px solid;
/*设置线性渐变*/
border-image: linear-gradient(90deg, rgba(0, 216, 247, 0) 0%, #00afed 100%) 5 5 5 5;

效果如下：
在这里插入图片描述

3.2.2 右侧边框线性渐变

从上到下，从起始开始，透明向蓝色渐变到20%的位置，然后又向透明进行渐变到99%的位置，99%到结束是透明

/*首先我们设置边框只显示右侧，宽度为5px的实线。*/
border-right: 5px solid;
/*设置线性渐变*/
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 5 5 5 5;