利用css实现渐变色(通俗易懂)-Toy模板网

这篇具有很好参考价值的文章主要介绍了利用css实现渐变色(通俗易懂)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

0、前言

使用边框颜色渐变之前，先了解一下以下三种渐变类型：

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

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

1、一个方向值时： to bottom 表示从上边到下边

2、两个方向值时： to right bottom 表示从左上角到右下角

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

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

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

1、线性渐变

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

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

渐变方向有以下几种值：

使用表示方位的单词

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

2、径向渐变

径向渐变使用radial-gradient，语法如下：

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

2.1 径向渐变

2.1.1 圆形

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

效果如下：
利用css实现渐变色(通俗易懂),Css,css,前端

2.1.2 椭圆形

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

效果如下：
利用css实现渐变色(通俗易懂),Css,css,前端

2.2 重复性径向渐变

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

效果如下：
利用css实现渐变色(通俗易懂),Css,css,前端

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;

效果如下：
利用css实现渐变色(通俗易懂),Css,css,前端

3.1.2 径向渐变

语法如下：

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

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

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

效果如下：
利用css实现渐变色(通俗易懂),Css,css,前端

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;

效果如下：
利用css实现渐变色(通俗易懂),Css,css,前端

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;