CSS conic-gradient() 函数 详解
CSS conic-gradient() 函数
定义和用法
conic-gradient() 函数将圆锥渐变设置为背景图像。
圆锥渐变是颜色过渡围绕中心点旋转的渐变。
如需创建圆锥渐变，您必须至少定义两个色标。
锥形渐变的例子：
| 版本： | CSS3 |
|---|
另请参阅：
CSS 教程：CSS 渐变
实例
例子 1
有三种颜色的圆锥渐变：
#grad {
background-image: conic-gradient(red, yellow, green);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>锥形渐变 - 三种颜色</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：页面底部提供更多实例。
CSS 语法
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
| 值 | 描述 |
|---|---|
| from angle | 可选。整个锥形渐变旋转此角度。默认值为 0 度。 |
| at position | 可选。规定圆锥渐变的渐变中心。默认值为 center。 |
| color degree, ..., color degree |
色标是您想要呈现平滑过渡的颜色。 该值由一个颜色值和一个可选的停止位置（介于 0 和 360 之间的度数或介于 0% 和 100% 之间的百分比）组成。 |
更多实例
例子 2
有五种颜色的圆锥渐变：
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>
<h1>锥形渐变 - 五种颜色</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 3
有三种颜色和每种颜色的度数的圆锥渐变：
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>
<h1>锥形渐变 - 为每种颜色定义角度</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 4
通过添加 border-radius: 50% 使锥形渐变看起来像饼图：
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>锥形渐变 - 饼图</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 5
规定了 from angle 的圆锥渐变：
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>锥形渐变 - 设置 from angle</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 6
规定了 at position 的圆锥渐变：
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>锥形渐变 - 设置 at position</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 7
规定了 from angle 和 at position 的圆锥渐变：
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>锥形渐变 - 同时设置 from angle 和 at position</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 8
另一个饼图：
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>锥形渐变 - 饼图</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
