css conic-gradient属性设置技巧

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(from <angle> at <position>, <color-stop-list>);

• from <angle>

  登录后复制
  ：这个参数定义了渐变的起始角度。默认是

  0deg

  登录后复制
  ，也就是顶部正中，你可以把它想象成时钟的12点方向。如果你想让渐变从其他方向开始，比如从右侧开始，可以设置为

  90deg

  登录后复制
  。

• at <position>

  登录后复制
  ：这个是用来设定渐变中心点的位置。默认是

  center

  登录后复制
  ，也就是元素的正中央。你也可以用

  top left

  登录后复制
  、

  50% 50%

  登录后复制
  甚至具体的像素值来调整中心点。

• <color-stop-list>

  登录后复制
  ：这部分是定义颜色以及它们在圆弧上的停靠位置。每个颜色停靠点可以是一个颜色值（比如

  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)

立即学习“前端免费学习笔记（深入）”；

你也可以只指定一个角度，让颜色从该角度开始。比如：

.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

  登录后复制
  ，我更喜欢把它想象成一个旋转的色盘或者一个切好的蛋糕，颜色是沿着圆周分布的。它围绕一个中心点旋转，颜色沿着圆弧路径变化，而不是直线或从中心向外扩散。这是它最核心的特点。

什么时候用哪个？

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

• 如果你想在横幅、导航栏或简单的背景上做颜色过渡，

  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

#333

background-size

要理解这种复杂效果，核心在于：

1. repeating-conic-gradient

   登录后复制
   的重复逻辑：它会把

   360deg

   登录后复制
   按照你设定的最后一个颜色停止点的角度（或百分比）作为周期进行重复。
2. 颜色停止点的重叠：通过巧妙地设置颜色停止点，让不同的颜色在同一个角度范围开始或结束，可以制造出锐利的边缘和复杂的图案。
3. 结合其他 CSS 属性：

   background-size

   登录后复制
   、

   background-position

   登录后复制
   甚至是多层

   background-image

   登录后复制
   叠加，都是实现复杂

   conic-gradient

   登录后复制
   效果的有力工具。

有时候，你需要一点点试错才能得到想要的效果，这很正常。多尝试不同的角度和颜色组合，你会发现

conic-gradient

conic-gradient 在实际项目中可能遇到哪些兼容性问题和性能考量？

老实说，

conic-gradient

caniuse.com

兼容性问题及应对： 如果你的项目需要兼容IE这类老旧浏览器，那肯定得准备一个降级方案，因为它们是完全不支持

conic-gradient

@supports

.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

conic-gradient

conic-gradient

可访问性： 更需要注意的是，如果你把

conic-gradient

以上就是css conic-gradient属性设置技巧的详细内容，更多请关注php中文网其它相关文章！