CSS repeating-conic-gradient() 函数 详解
css3基础 2023-07-29 16:41:07小码哥的IT人生shichen
CSS repeating-conic-gradient() 函数
实例
例子 1
一个重复的圆锥渐变：
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>重复锥形渐变</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2
重复的锥形渐变，拥有被定义的颜色起点和颜色终点：
#grad {
background-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>重复锥形渐变</h1>
<div id="grad1"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
background-image: repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);
| 值 | 描述 |
|---|---|
| from angle | 可选。整个锥形渐变旋转了此角度。默认值为 0 度。 |
| at position | 可选。规定圆锥渐变的渐变中心。默认值为 center。 |
| color degree, ..., color degree |
色标是您想要呈现平滑过渡的颜色。 该值由一个颜色值和一个可选的停止位置（介于 0 和 360 之间的度数或介于 0% 和 100% 之间的百分比）组成。 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
