CSS中radial-gradient和conic-gradient渐变

CSS中radial-gradient和conic-gradient渐变

radial-gradientradial-gradient()是径向渐变，指的是一个中心点向四周扩撒的渐变效果，其中包括波的扩散和光的扩散中都有径向渐变的特征。
css中我们使用radial-gradient()函数表示径向渐变，语法比较复杂，所以我们可以从简单的径向渐变开始看：
.warpper{width:250px;heigth:125px;background-image:radial-gradient(blue,red);}上面展示的是一个椭圆渐变效果，径向渐变的方向由中心往外部的，默认终止于元素的边框内边缘。其实所有径向渐变语法都是围绕改变径向渐变的半径值、中心点坐标、渐变颜色的起点和终点展开的。
如果我们希望代码显示的径向渐变只有半径只有50px,垂直半径还是默认大小，则可以设置50px50%作为第一个参数，径向代码就可以这样写：
radial-gradient(50px50%,black,red);如果我们想径向的水平半径和垂直半径都是50px，就不需要设置50px50px，直接设置50px就可以了，当作圆形径向渐变处理就行：
radial-gradient(50px,black,red);我们需要注意的是，水平半径和垂直半径合一起写的时候，只能是长度值，不能是百分比值，但是如果想要使用百分比值，就必须给出两个值：
radial-gradient(40%40%,black,red);如果我们想要改变中心点位置，我们可以使用at<position>语法，如果渐变的中心点不在元素的中心位置，又希望渐变的结束位置在元素的某一侧边缘或某一个边角，那么我们可以使用<extent-keyword>数据类型。这个数据类型中有4个关键字，分别是closest-side、closest-corner、farthest-side、farthes-corner(默认值),它们分别表示渐变中心距离容器最近的边作为终止位置、渐变中心距离容器最近的角作为终止位置、渐变中心距离容器最远的边作为终止位置、渐变中心距离容器最远的角作为终止位置。
conic-gradientconic-gradient()表示锥形渐变，虽然很实用，但是兼容性不是很好，所以一般用于移动端项目和后台项目中使用。锥形渐变主要由3部分组成，包括起始角度、中心位置、角渐变断点，其中起始角度和中心位置都可以省略的。
角渐变断点的数据类型是<angular-color-stop-list>。角渐变断点与线性渐变和径向渐变的区别在于角渐变断点不支持长度值，支持的是角度值。角渐变断点中设置的角度是一个相对角度值，最终渲染的角度值是设置的角度值和起始角度值累加的值。
锥形渐变可以很容易就实现饼状图效果：
.wrapper{width:100px;height:100px;border-radius:50%;background:conic-gradient(red40%,blue0deg75%,black0deg);}其中0deg换成0%效果是一样的。
线性渐变和径向渐变以及锥形渐变都有对应的重复渐变函数，就是在各自函数的前面添加repeating-前缀，无论是重复性线性渐变、重复径向渐变还是重复又锥形渐变，它们的语法和对应的非重复渐变语法是一模一样的，其中区别就在渲染表现上，非重复渐变的起止颜色位置如果是0%和100%，则可以省略，而对于重复渐变，起止颜色的位置需要明确定义。
2024-09-18