语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
具有三种颜色的径向渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509, #fff700, #05ff33);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
定位径向色标
与线性渐变一样，径向渐变也采用指定的位置和绝对长度。
不同间距色标的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
径向梯度定位中心
我们还可以使用百分比或者绝对长度指定渐变的中心位置。
带有中心位置的径向渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
径向渐变形状
shape 参数定义径向渐变的形状。
它可以采用两个值：圆或者椭圆。
默认值为椭圆。
径向渐变形状示例：
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(red, yellow, green);
}
.gradient2 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h2>Ellipse:</h2>
<div class="gradient1"></div>
<h2>Circle:</h2>
<div class="gradient2"></div>
</body>
</html>
调整径向渐变
与线性渐变不同，可以指定径向渐变的大小。
这些值是：
- closest-corner 最近的角
- closest-side 最近的边
- farthest-corner 最远角（默认）
- farthest-side 最远的边。
指定大小的径向渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient2 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient3 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient4 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
</style>
</head>
<body>
<h2>closest-side:</h2>
<div class="gradient1"></div>
<h2>farthest-side:</h2>
<div class="gradient2"></div>
<h2>closest-corner:</h2>
<div class="gradient3"></div>
<h2>farthest-corner:</h2>
<div class="gradient4"></div>
</body>
</html>
重复径向渐变
repeating-radial-gradient() CSS 函数创建一个图像，该图像由从原点辐射的重复渐变组成。
重复径向渐变的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
height: 200px;
width: 200px;
background-color: blue;
background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
CSS 渐变显示两种或者多种指定颜色之间的渐进过渡。
渐变可用于背景。
渐变分为三种类型：
- 线性渐变
- 径向渐变
- 圆锥梯度
线性渐变
线性渐变创建的图像由沿直线的两种或者多种颜色之间的平滑过渡组成。
它可以有一个起点和一个方向以及渐变效果。
语法
background-image: linear-gradient(direction, color1, color2, ...);
从上到下
默认情况下，线性渐变从上到下过渡。
从上到下的线性渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
我们为不支持渐变的浏览器添加背景颜色。
左到右
更改线性渐变旋转，指定从左过渡到右的方向。
从左到右的线性渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #0052b0 ,#b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
对角线渐变
渐变可以对角运行，指定水平和垂直的起始位置。
它从左上角开始，到右下角。
对角线渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to bottom right, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
使用角度
定义角度而不是方向以更好地控制渐变方向。
0deg 创建一个从底部到顶部过渡的垂直渐变，90deg 创建一个从左到右过渡的水平渐变。
指定负角度将沿逆时针方向运行。
具有指定角度的线性渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(70deg, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
多色效果
CSS 渐变颜色随位置变化，产生平滑的颜色过渡。
颜色的使用没有限制。
具有多种颜色效果的线性渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
我们还可以创建一个具有指定方向的多种颜色效果的线性渐变。
我们可以为每种颜色指定零、一或者两个百分比或者绝对长度值。
0% 表示起点，100% 表示终点。
从左到右具有多种颜色的线性渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
从右到左具有多种颜色的线性渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
透明度
渐变支持透明，因此可以使用多个背景来实现透明效果。
要实现它，我们可以使用 rgba() 函数来定义色标。
rgba() 函数中的最后一个参数可以是 0 到 1 之间的值，它将定义颜色的透明度。
0 表示全透明，1 表示全彩。
从全色到透明的线性渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
重复线性梯度
使用 repeating-linear-gradient() 函数重复线性渐变。
随着渐变的重复，颜色会一遍又一遍地循环。
重复线性渐变的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-color: blue;
background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
语法
background-image: conic-gradient(color1, color2);
基本圆锥梯度的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(#ff0000, #fff200);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
定位圆锥中心
与径向渐变一样，圆锥渐变的中心可以使用百分比或者绝对长度定位，并使用“at”关键字。
具有定位中心的圆锥渐变示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
改变角度
可以使用“from”关键字旋转圆锥渐变的角度。
带有旋转角度的圆锥梯度示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
重复圆锥梯度
repeating-conic-gradient() CSS 函数创建一个图像，该图像由一个重复渐变组成，颜色过渡围绕中心点旋转。
重复圆锥梯度的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
圆锥梯度
conic-gradient 创建一个图像，该图像由一个渐变组成，颜色过渡围绕中心点旋转。
径向渐变
径向渐变从中心点向外辐射。
要创建径向渐变，必须至少指定两个色标。
径向渐变可以是圆形或者椭圆形。
日期：2020-06-02 22:14:26 来源：oir作者：oir