第十三讲：CSS渐变之锥形渐变
锥形渐变函数写作 conic-gradient()，conic 意为圆锥形的，故而汉语称之为锥形渐变；conic又与角的词根同源，且实际渐变效果与角度有直接关系，所以又名角向渐变。我们先来看看锥形渐变的默认效果，下面的 class="cbox1" 盒子的背景使用了锥形渐变，共有三种颜色参与：
<style>
.cbox1 {
width: 300px;
height: 300px;
background: conic-gradient(red, green, yellow);
}
</style>
<div class="cbox1"></div>
效果表明：渐变从盒子的中心发起，并以中心为圆心，三种颜色按照顺时针方向绕圆心走一圈；第一个颜色即红色和最后一个颜色即黄色的交界是硬线，硬线的位置为圆心到上边缘中点的连线，可知渐变发起的角度指向12点钟方向，是 0deg。我们可以改变渐变中心和渐变开始的角度，试看：
<style>
.cbox2 {
width: 300px;
height: 300px;
background: conic-gradient(from 90deg at 70% 50%, red, green, yellow);
}
</style>
<div class="cbox2"></div>
仔细看background属性代码，锥形渐函数内加了一个组合参数，from 90deg 表示渐变的开始角度从90度开始，硬线指向3点钟方向，at 70% 50% 表示渐变的中心在元素的(70%,50%)坐标处。请结合实际效果，感受渐变角度、渐变中心的设置对锥形渐变的影响。
锥形渐变可以用来设计各种有趣的图案，例如下面，我们用两种颜色来构图，其中的一种颜色头尾各用一次构成上部的颜色区域：
<style>
.cbox3 {
width: 300px;
height: 300px;
background: conic-gradient(at 50% 60%, lightblue 20%, skyblue 20% 80%, lightblue 0);
}
</style>
<div class="cbox3"></div>
使用锥形渐变做饼状图是小菜一碟，仅需分配好色标数值、将盒子设置为圆形：
<style>
.cbox4 {
width: 300px;
height: 300px;
background: conic-gradient(lightblue 10%, teal 10% 45%, plum 45% 78%, cyan 0);
border-radius: 50%
}
</style>
<div class="cbox4"></div>
色标值除了使用百分比标注，还直接支持角度值。试看三等分的饼状图：
<style>
.cbox5 {
width: 300px;
height: 300px;
background: conic-gradient(cyan 120deg, teal 120deg 240deg, lightblue 0);
border-radius: 50%
}
</style>
<div class="cbox5"></div>
和其他的渐变一样，锥形渐变渲染出来的图案也可以看成是图片，利用图片背景的特性，我们给渐变做精巧的设计，然后加上背景位置和背景尺寸，可以做出非常实用的效果，比如做一个国际象棋棋盘：
<style>
.cbox6 {
width: 300px;
height: 300px;
background: conic-gradient(white 25%, black 25% 50%, white 50% 75%, black 75%) 0 0/25% 25%;
border: 1px solid black;
}
</style>
<div class="cbox6"></div>
重复性锥形渐变函数写成 repeating-conic-gradient()，最后一个颜色的终止色标值将表示渐变单元的总尺寸，百分比或角度，该单元将被重复直至铺满整个盒子。请分析以下代码，并结合运行效果尝试理解为什么渐变单元被复制了四次：
<style>
.cbox7 {
width: 300px;
height: 300px;
background: repeating-conic-gradient(orange 0deg 30deg, yellow 30deg 60deg, gold 60deg 90deg);
border-radius: 50%;
}
</style>
<div class="cbox7"></div>
上面的效果我们实现了硬线锥形渐变，这里需要注意，在重复性锥形渐变里实现硬线锥形渐变，任何一种颜色的色标最好都给出色标起、始值，不像其他渐变可以省略头尾颜色的一些值。
本节主要介绍锥形渐变的两个函数，conic-gradient()和repeating-conic-gradient()。锥形渐变生成的渐变效果，默认从12点钟方向开始，参与渐变的颜色绕元素的中心坐标做顺时针方向过渡、形成颜色间的渐变。重复性锥形渐变以最后一个颜色的终止色标值（角度或百分比）作为被复制的渐变单元铺满整个元素。
作业：制作一个400*400的元素，使得两种颜色构成的重复性渐变以10份的形式渲染整个元素，最终的结果达到，① 渐变中心在元素的中央，② 颜色交接浑然天成，渐变次序为121121这样的延续。提示：① 使用重复性锥形渐变很容易完成这个作业；② 颜色虽是两种，在一个渐变单元里可以重复其中的一种颜色。
返回目录
楼主: 马黑黑
楼主
显身卡
发表于 2024-8-1 18:51
发表于 2024-8-1 21:08
发表于 2024-8-2 20:03
