语法
conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] ||
<color-interpolation-method> , <angular-color-stop-list> )
属性
1. angle
定义顺时针方向的渐变旋转角度;
单位包括度的
deg
、梯度的grad
、弧度的rad
和圈的turn
。在一个圆中有 360 度,400 个梯度,2π 弧度,1 圈
2. position
同background-position,定义渐变中心
3. angular-color-stop-list
颜色断点指,并且跟随一个或两个可选的断点的位置(沿着渐变圆周的angle)
指定2个值时,表示这个颜色的开始和结束角度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient</title>
<style>
.conic-wrapper {
width: 160px;
height: 160px;
border: 1px solid #999;
}
.conic-gradient {
/* 棋盘格 */
background: conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
background-size: 25% 25%;
/* 饼图 */
/* background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
border-radius: 50% */
}
</style>
</head>
<body>
<div class="conic-wrapper conic-gradient">
</div>
</body>
</html>