共计 3420 个字符，预计需要花费 9 分钟才能阅读完成。
实现成果
1. 什么是 conic-gradient(圆锥突变）
conic-gradient 是圆锥突变，以一个点为核心起始点，沿着圆周变动。
语法：conic-gradient(from 起始角度 at 中心点地位, 突变断点)
兼容性：
一个简略的例子：看清他的突变方向，起始点是图形核心，而后以顺时针方向绕核心实现突变成果。
<style>
section{
margin: 40px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.a{background:conic-gradient(#000, #fff);
width: 200px;
height: 200px;
}
</style>
<body>
<section>
<h1> 一个简略的例子 </h1>
<div class="a"></div>
</section>
</body>
2.linear-gradient : 线性突变
linear-gradient 线性突变的方向是一条直线，能够是任何角度，向下 / 向上 / 向左 / 向右 / 对角方向。看一个简略的例子。repeating-linear-gradient（）示意反复的线性突变。
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
为了创立一个线性突变，你必须至多定义两种色彩节点。色彩节点即你想要出现平稳过渡的色彩。同时，你也能够设置一个终点和一个方向（或一个角度）。
<section>
<h1> 一个简略的例子 linear-gradient</h1>
<div class="b"></div>
</section>
<section>
<h1> 一个例子 repeating-linear-gradient</h1>
<div class="c"></div>
</section>
.b{background:linear-gradient(to top right ,red 0,yellow 50%,transparent 50%,transparent 100%);
width: 200px;
height: 200px;
}
.c{background:repeating-linear-gradient(45deg,#55aa7f,#55ff7f,5px ,#ffaaff 0,#ff55ff 20px);
width: 200px;
height: 200px;
}3.radial-gradient : 径向突变
径向突变是从圆心点以椭圆形状向外扩散。
语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 参数定义了形态。它能够是值 circle 或 ellipse。其中，circle 示意圆形，ellipse 示意椭圆形。默认值是 ellipse。
<section>
<h1> 一个例子 radial-gradient</h1>
<div class="d"></div>
</section>
<section>
<h1> 一个例子 radial-gradient 椭圆形 Ellipse（默认）：</h1>
<div class="e"></div>
</section>
<section>
<h1> 一个例子 radial-gradient 圆形 Circle：</h1>
<div class="f"></div>
</section>
.d{background-image:radial-gradient(transparent 0,transparent 49%,#ffaaff 50%,#3eff8b 100%);
width: 200px;
height: 200px;
}
.e{background-image:radial-gradient(#ffaaff ,#3eff8b,#000);
width: 300px;
height: 200px;
}
.f{background-image:radial-gradient(circle,#ffaaff ,#3eff8b,#000);
width: 300px;
height: 200px;
}3.1 反复的径向突变
repeating-radial-gradient() 函数用于反复径向突变。
<section>
<h1> 一个反复的 radial-gradient</h1>
<div class="g"></div>
</section>
.g{
width: 300px;
height: 200px;
background-image: repeating-radial-gradient(#ffaaff 10% ,#3eff8b 20%,#000 10%);
}4. 重点的说一下 conic-gradient（锥形突变的利用）
4.1 色彩表盘
.j{background:conic-gradient(red, orange, yellow, green, teal, blue, purple,red);
width: 200px;
height: 200px;
border-radius: 50%;
}
<section>
<h1>conic-gradient 实现色彩表盘 </h1>
<div class="j"></div>
</section>4.2 圆环进度条
<section>
<h1>conic-gradient 实现圆弧进度条成果 </h1>
<div class="n" style="background-image:conic-gradient(from -180deg,#a8c992 77%,#ebebeb 0%)">
<text class="n-text">77%</text>
</div>
</section>
.n{
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
}
.n::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
border-radius: 50%;
background-color: #fff;
}
.n-text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 20rpx;
color: #a8c992;
}4.3 实现饼图
<section>
<h1>conic-gradient 实现饼图 </h1>
<div class="o"></div>
</section>
.o{
width: 200px;
height: 200px;
border-radius: 50%;
/* 写法一：*/
background: conic-gradient(#ffaaff 0, #ffaaff 20%, #aa55ff 20%, #aa55ff 60%, #aaff7f 60%, #aaff7f 100%);
/* 写法二：*/
/* background: conic-gradient(#ffaaff 0 20%, #aa55ff 30% 70%, #aaff7f 70% 100%); */
}4.4 实现棋盘
<section>
<h1>conic-gradient 实现棋盘成果 </h1>
<div class="k"></div>
</section>
.k{
width: 400px;
height: 200px;
background: conic-gradient(#eee 25%, white 0deg 50%, #eee 0deg 75%, white 0deg) 0 / 20px 20px;
}5. 反复圆锥突变 repaeting-conic-gradient
.q{
width: 400px;
height: 300px;
background: repeating-conic-gradient(#aaaa7f 0 15deg, #fff 0 30deg);
}
<section>
<h1> 反复 conic-gradient</h1>
<div class="q"></div>
</section>6. 更多案例请移步
https://gitee.com/susuhhhhhh/css_demos
正文完
