文章导读

CSS中conic-gradient()函数有何特点？利用锥形渐变创建独特视觉效果

作者 2025年8月28日 11

conic-gradient()通过角度渐变实现旋转色彩效果，区别于线性与径向渐变，适用于饼图、仪表盘、动态加载器及创意背景等视觉设计。

conic-gradient()

函数，在我看来，它就像是前端世界里的一把“调色刀”，专门用来切分和旋转色彩，而非传统意义上的线性或径向扩散。它最显著的特点就是颜色会围绕一个中心点，按照角度进行渐变，就像一个饼图或者雷达扫描的轨迹。这种独特的角度渐变模式，让它在创建色彩盘、仪表盘、扇形图以及各种富有几何感和旋转美学的视觉效果时，拥有了其他渐变函数无法比拟的优势。它不仅仅是颜色的过渡，更是一种方向和角度的表达，能够帮助我们轻松实现那些需要“旋转”或“扇形”概念的独特设计。

解决方案

要利用

conic-gradient()

创建独特的视觉效果，我们首先需要理解它的基本语法和工作原理。它与

linear-gradient

和

radial-gradient

最大的不同，在于渐变是围绕一个中心点，以角度为基准进行颜色过渡的。

基本语法结构是这样的：

conic-gradient([from <angle>]? [at <position>]?, <color-stop-list>)

这里有几个关键点：

from <angle>

: 这个可选参数定义了渐变的起始角度。默认是
```
0deg
```
，也就是正上方（12点钟方向）。你可以把它设置为任何角度，比如
```
90deg
```
从右侧开始，或者
```
180deg
```
从下方开始。这给了我们极大的灵活性去控制渐变的“起点”。
at <position>

: 同样是可选参数，它定义了渐变的中心点。默认是
```
center
```
，也就是元素的正中央。你可以用百分比（
```
50% 50%
```
）、长度单位（
```
100px 50px
```
）或者关键字（
```
top left
```
）来精确控制这个中心点的位置。改变中心点会彻底改变渐变的外观，因为它决定了所有角度的“原点”。
<color-stop-list>

: 这是最核心的部分，定义了颜色和它们对应的角度或百分比。你可以像这样指定：
```
red 0deg, yellow 90deg, blue 180deg, green 270deg, red 360deg
```
。颜色会从
```
red
```
在
```
0deg
```
处开始，逐渐过渡到
```
yellow
```
在
```
90deg
```
处，以此类推。如果省略角度，浏览器会根据颜色数量自动分配角度，但为了精确控制，我个人更倾向于明确指定。

举个例子，如果想创建一个简单的彩虹色环，我们可以这样做：

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

.rainbow-circle {   width: 200px;   height: 200px;   border-radius: 50%;   background: conic-gradient(     from 0deg,     red 0deg,     orange 60deg,     yellow 120deg,     green 180deg,     blue 240deg,     indigo 300deg,     violet 360deg   ); }

通过调整角度和颜色，我们就能创造出无限多的可能性。它不仅仅是关于色彩，更是关于空间和角度的巧妙运用。

conic-gradient() 与其他渐变函数有何本质区别？

在我看来，

conic-gradient()

与

linear-gradient

和

radial-gradient

之间存在着一种根本性的思维差异。

linear-gradient

是在一条直线上进行颜色过渡，就像从左到右或从上到下刷一道颜色。它的变化方向是固定的，是二维空间中的一个向量。而

radial-gradient

则是从一个中心点向外扩散，形成同心圆的颜色变化，更像是水波纹，或者说，它在径向上进行过渡，但其形状是圆形的。

conic-gradient()

则完全不同，它的核心在于“角度”和“旋转”。颜色不是沿着直线变化，也不是从中心向外扩散，而是围绕着一个中心点，像指针一样旋转着进行颜色过渡。想象一下一个时钟的表盘，颜色从12点钟方向开始，顺时针或逆时针地沿着表盘边缘变化。这种“扫过式”的渐变，使得它天生就适合表现那些带有“扇形”、“饼状”或“旋转”概念的图形。

举个例子，如果你想做一个简单的进度条，

linear-gradient

可以很好地实现横向或纵向的填充。如果你想做一个发光的按钮，

radial-gradient

能模拟出中心亮、边缘暗的效果。但如果你想做一个饼图，或者一个模拟雷达扫描的动画，

conic-gradient()

几乎是唯一的纯CSS解决方案。它填补了CSS渐变能力的一个空白，让我们可以用纯CSS实现过去需要图片或者SVG才能完成的效果。这种差异不仅仅是语法上的，更是其在设计表达能力上的独特性。

如何利用 conic-gradient() 实现复杂的色彩盘或仪表盘效果？

利用

conic-gradient()

来制作复杂的色彩盘或仪表盘，这简直是它的“拿手好戏”。它的角度渐变特性，让这类需求变得异常简单直观。

要创建一个色彩盘，比如一个色相环，我们只需要将光谱中的颜色按照它们在色相环上的顺序，以等分的角度排列即可。例如：

.color-wheel {   width: 250px;   height: 250px;   border-radius: 50%;   background: conic-gradient(     from 0deg,     hsl(0, 100%, 50%) 0deg,   /* Red */     hsl(60, 100%, 50%) 60deg,  /* Yellow */     hsl(120, 100%, 50%) 120deg, /* Green */     hsl(180, 100%, 50%) 180deg, /* Cyan */     hsl(240, 100%, 50%) 240deg, /* Blue */     hsl(300, 100%, 50%) 300deg, /* Magenta */     hsl(0, 100%, 50%) 360deg  /* Back to Red */   );   /* 加上一点阴影，让它看起来更有立体感 */   box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

这里我用了

hsl()

颜色模式，因为它可以更直观地控制色相（hue）、饱和度（saturation）和亮度（lightness），非常适合创建平滑的色相环。通过精确指定每个颜色停止点的角度，我们就能得到一个完美的、连续的色彩盘。

对于仪表盘效果，比如一个汽车的速度表或者一个数据百分比显示，

conic-gradient()

同样大有可为。我们可以利用它来模拟指针扫过的区域。假设我们想创建一个显示75%进度的仪表盘：

.dashboard-gauge {   width: 200px;   height: 200px;   border-radius: 50%;   background: #eee; /* 背景色，表示未填充部分 */   position: relative;   overflow: hidden; /* 隐藏超出部分 */ }  .dashboard-gauge::before {   content: '';   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   border-radius: 50%;   /* 关键：从0度开始，绿色填充到270度（75%），然后透明 */   background: conic-gradient(     from 0deg,     #4CAF50 0deg 270deg, /* 绿色填充到270度 */     transparent 270deg 360deg /* 剩余部分透明 */   ); }  /* 为了让它看起来像个圆环，可以在上面再盖一层 */ .dashboard-gauge::after {   content: '';   position: absolute;   top: 20px; /* 内环距离外环的边距 */   left: 20px;   width: calc(100% - 40px);   height: calc(100% - 40px);   border-radius: 50%;   background: white; /* 覆盖中心，形成环状 */ }

在这个例子中，我们用

::before

伪元素创建了实际的渐变，让绿色从

0deg

一直延伸到

270deg

（因为

270deg

是

360deg * 0.75

），然后剩下的部分是透明的。再用

::after

伪元素在中间覆盖一个白色圆圈，就形成了一个漂亮的环形仪表盘。这种组合使用伪元素和

conic-gradient()

的方式，能让我们构建出非常精细且动态的ui组件。

conic-gradient() 在实际项目中有哪些不常见的创意应用？

除了常见的色彩盘和仪表盘，

conic-gradient()

在实际项目中还有很多不那么常见，但非常富有创意的应用。这些应用往往需要我们跳出常规思维，将它与其他css属性结合起来。

一个我个人觉得很有趣的应用是创建带有角度纹理的背景。我们不一定要用它来做平滑的颜色过渡，而是可以利用其角度特性来模拟某种光影或者材质感。比如，通过快速交替的颜色停止点，我们可以创建出类似木材年轮、指纹或者某种抽象的放射状图案。

.abstract-texture {   width: 300px;   height: 300px;   background: conic-gradient(     from 0deg,     #f0f0f0 0deg 10deg,     #e0e0e0 10deg 20deg,     #d0d0d0 20deg 30deg,     #f0f0f0 30deg 40deg,     /* ...重复更多细小的角度，形成条纹 */     #e0e0e0 350deg 360deg   );   border-radius: 10px;   /* 还可以结合 background-blend-mode 创造更多效果 */ }

这种方式可以为UI元素带来独特的背景，避免了单调的纯色或线性渐变。

另一个很酷的应用是制作动态加载指示器或进度条。传统的加载动画通常是旋转的圆圈或点，但

conic-gradient()

可以实现一个“扫描式”的加载效果。

.loading-spinner {   width: 60px;   height: 60px;   border-radius: 50%;   background: conic-gradient(     from 0deg,     #4CAF50 0deg 90deg, /* 绿色扇形 */     transparent 90deg 360deg /* 其余透明 */   );   animation: spin 2s linear infinite; /* 旋转动画 */   transform-origin: center; }  @keyframes spin {   to { transform: rotate(360deg); } }

这个例子创建了一个四分之一圆的绿色扇形，然后通过

animation

让它不断旋转，形成一个动态的加载效果。我们可以调整扇形的大小和颜色，甚至可以叠加多个

conic-gradient

来创建更复杂的动画。

此外，

conic-gradient()

还可以用于创建带有角度渐变的边框。虽然CSS的

border-image

也可以实现渐变边框，但

conic-gradient()

提供了一种不同的思路，尤其是在需要边框颜色按角度变化时。

.angled-border-box {   width: 200px;   height: 100px;   background: #fff; /* 内部背景 */   padding: 5px; /* 留出边框空间 */   border-radius: 8px;   background-clip: padding-box; /* 确保背景只在内边距区域 */   border: 5px solid transparent; /* 创建透明边框 */   background-image: conic-gradient(     from 0deg,     #ff7e5f, #feb47b, #ff7e5f 360deg /* 循环渐变 */   );   background-origin: border-box; /* 让渐变应用到边框区域 */ }

通过将

conic-gradient

作为

background-image

应用到

border-box

，并结合

background-clip: padding-box

，我们可以让渐变只出现在边框区域，从而实现一个独特的角度渐变边框。这些例子都表明，只要我们敢于尝试和组合，

conic-gradient()

能带来的视觉惊喜远超我们的想象。

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！