conic-gradient用于创建围绕中心点旋转的圆弧形渐变，适合饼图、颜色轮等设计。其语法为background: conic-gradient(from 角度 at 位置, 颜色停靠点)，支持精确角度控制和repeating-conic-gradient实现重复图案，常配合background-size等属性制作棋盘格等纹理。与linear-gradient（线性）、radial-gradient（径向）不同，conic-gradient沿圆周变化颜色。现代浏览器支持良好，可用@supports做兼容处理，静态使用性能优异，需注意可访问性中的颜色对比度问题。
CSS的
conic-gradient属性，简单来说，就是让你能画出那种围绕一个中心点旋转渐变的图形，就像一个彩虹圆盘或者饼图。它跟我们熟悉的线性、径向渐变不一样，核心在于颜色是沿着一个圆弧路径变化的，而不是直线或者从中心向外扩散。
解决方案
说起
conic-gradient，我个人觉得它真正好玩的地方在于那种“一圈圈”的色彩变化，不像
linear或
radial那样直来直去或由内而外。它的基本语法其实挺直观的，但要玩出花样，就得琢磨几个关键参数。
conic-gradient的基本结构是这样的：
background: conic-gradient(fromat , );
from
：这个参数定义了渐变的起始角度。默认是0deg
，也就是顶部正中，你可以把它想象成时钟的12点方向。如果你想让渐变从其他方向开始，比如从右侧开始，可以设置为90deg
。at
：这个是用来设定渐变中心点的位置。默认是center
，也就是元素的正中央。你也可以用top left
、50% 50%
甚至具体的像素值来调整中心点。
：这部分是定义颜色以及它们在圆弧上的停靠位置。每个颜色停靠点可以是一个颜色值（比如red
、#f00
），后面跟着一个可选的角度或百分比来精确控制颜色过渡。
举个例子，如果我们想创建一个简单的四色饼图：
.pie-chart {
background: conic-gradient(
red 0deg 90deg, /* 红色从0度到90度 */
yellow 90deg 180deg, /* 黄色从90度到180度 */
blue 180deg 270deg, /* 蓝色从180度到270度 */
green 270deg 360deg /* 绿色从270度到360度 */
);
border-radius: 50%; /* 让它变成圆形 */
width: 200px;
height: 200px;
}这里我直接给出了每个颜色段的起始和结束角度，这样看起来就非常明确。当然，你也可以只给颜色，让浏览器自动分配空间，比如
conic-gradient(red, yellow, blue)，它会自动把360度分成三份。但要精确控制，角度是必须的。
立即学习“前端免费学习笔记（深入）”；
你也可以只指定一个角度，让颜色从该角度开始。比如：
.simple-gradient {
background: conic-gradient(red 45deg, blue);
border-radius: 50%;
width: 200px;
height: 200px;
}这个例子里，红色会从0度持续到45度，然后蓝色从45度开始，一直到360度。这种方式更简洁，适合简单的颜色过渡。
conic-gradient 和 linear-gradient、radial-gradient 有什么本质区别？
我发现很多初学者会把这几个搞混，其实它们“渐变方向”的原理完全不同。
-
linear-gradient
(线性渐变)：它的颜色是沿着一条直线逐渐变化的。你可以想象成画一条彩虹直线，颜色从起点到终点均匀过渡。比如，从左到右，或者从上到下。background: linear-gradient(to right, red, blue);
-
radial-gradient
(径向渐变)：这种渐变是从一个中心点向四周扩散的。它更像水波纹，颜色从中心向外呈同心圆状扩散。你可以控制它的形状是圆形还是椭圆形。background: radial-gradient(circle at center, red, blue);
-
conic-gradient
(锥形渐变)：而conic-gradient
，我更喜欢把它想象成一个旋转的色盘或者一个切好的蛋糕，颜色是沿着圆周分布的。它围绕一个中心点旋转，颜色沿着圆弧路径变化，而不是直线或从中心向外扩散。这是它最核心的特点。
什么时候用哪个？
Yes!SUN企业网站系统 3.5 Build 20100303
下载
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
- 如果你想在横幅、导航栏或简单的背景上做颜色过渡，
linear-gradient
是首选。 - 如果你想创建聚光灯效果、光晕或者模拟球体，
radial-gradient
会非常合适。 - 而
conic-gradient
，它在创建饼图、颜色轮、径向菜单背景、棋盘格纹理或者其他需要颜色围绕中心点旋转的图案时，简直是神器。理解它们各自的“渐变逻辑”，能帮你更准确地选择和应用。
如何实现更复杂的 conic-gradient 效果，比如棋盘格或重复图案？
要实现更复杂的
conic-gradient效果，特别是重复图案，
repeating-conic-gradient()这个函数就派上用场了。它会不断重复你定义的渐变模式，从而创造出各种有趣的纹理。
实现环形条纹： 最直接的重复效果就是环形条纹。
.striped-circle {
background: repeating-conic-gradient(
#f00 0deg 10deg, /* 红色从0度到10度 */
#00f 10deg 20deg /* 蓝色从10度到20度 */
);
border-radius: 50%;
width: 200px;
height: 200px;
}这段代码会生成一个红蓝相间的环形条纹图案，因为渐变模式（红10度，蓝10度）会每隔20度重复一次。
实现棋盘格效果： 棋盘格的实现稍微有点技巧，因为它需要交错的方块。一种常见的做法是利用
repeating-conic-gradient的颜色停止点重叠的特性，并结合
background-size或多层背景。
.checkerboard {
background: repeating-conic-gradient(
#eee 0% 25%, /* 浅色块占据前25%的扇形区域 */
#333 0% 50% /* 深色块也从0%开始，但占据前50%的扇形区域，覆盖了浅色块一部分 */
);
background-size: 50px 50px; /* 控制重复单元的大小，让它看起来像棋盘格 */
width: 200px;
height: 200px;
}这个棋盘格的例子可能有点反直觉，但它的原理是，
repeating-conic-gradient会不断重复你定义的渐变模式。上面这个例子，
#eee占了 0-25% 的角度，然后
#333同样从 0% 开始，但它覆盖到 50%。因为是重复的，并且
background-size限制了每个重复单元的尺寸，所以就形成了交错的棋盘格效果。
要理解这种复杂效果，核心在于：
-
repeating-conic-gradient
的重复逻辑：它会把360deg
按照你设定的最后一个颜色停止点的角度（或百分比）作为周期进行重复。 - 颜色停止点的重叠：通过巧妙地设置颜色停止点，让不同的颜色在同一个角度范围开始或结束，可以制造出锐利的边缘和复杂的图案。
-
结合其他 CSS 属性：
background-size
、background-position
甚至是多层background-image
叠加，都是实现复杂conic-gradient
效果的有力工具。
有时候，你需要一点点试错才能得到想要的效果，这很正常。多尝试不同的角度和颜色组合，你会发现
conic-gradient的潜力远超想象。
conic-gradient 在实际项目中可能遇到哪些兼容性问题和性能考量？
老实说，
conic-gradient曾经是比较新的玩意儿，但现在主流浏览器支持度已经相当不错了。你可以去
caniuse.com查一下具体数据，你会发现现代浏览器（Chrome, Firefox, Edge, Safari）对其支持都很好。
兼容性问题及应对： 如果你的项目需要兼容IE这类老旧浏览器，那肯定得准备一个降级方案，因为它们是完全不支持
conic-gradient的。我个人通常会用
@supports规则来优雅地处理这种情况，这是一种特性查询，能让浏览器判断是否支持某个 CSS 属性：
.element-with-gradient {
background-color: #ccc; /* 降级方案：为不支持的浏览器提供一个纯色背景 */
/* 也可以使用一张预设的图片作为降级背景 */
/* background-image: url('fallback-gradient.png'); */
}
@supports (background: conic-gradient(red, blue)) {
.element-with-gradient {
background: conic-gradient(red, blue); /* 现代浏览器方案 */
}
}这样，不支持
conic-gradient的浏览器会显示
#ccc的背景色，而支持的浏览器则会显示渐变。这是一种很实用的渐进增强策略。
性能考量： 至于性能，我个人觉得对于大多数非动画的、静态的
conic-gradient来说，性能开销几乎可以忽略不计。浏览器对这种图形渲染的优化已经很成熟了，它们通常会利用GPU进行硬件加速。当然，如果你在页面上大量使用极其复杂的
conic-gradient（比如有几百个颜色停止点），或者把它用在高性能要求的动画里，那理论上可能会有一点点性能影响，但通常情况下，这不是你需要优先考虑的问题。相比于复杂的JavaScript动画或大型图片资源，
conic-gradient的性能成本通常微不足道。
可访问性： 更需要注意的是，如果你把
conic-gradient用作背景，上面还有文字或重要信息，那务必确保文字和背景之间有足够的对比度，这关系到可访问性。别让你的酷炫设计牺牲了用户的阅读体验，特别是对于有视觉障碍的用户。可以使用一些在线工具来检查颜色对比度。如果渐变颜色变化较大，可能需要为文字添加阴影或描边来增加可读性。
