css radial-gradient和conic-gradient有什么区别

radial-gradient 从中心向外发散,适用于光晕或立体按钮;conic-gradient 围绕中心旋转过渡,适合饼图或色轮,两者分别实现放射状与角度式渐变效果。

radial-gradient 和 conic-gradient 都是 CSS 中用来创建渐变背景的函数,但它们的渲染方式和使用场景完全不同。

radial-gradient:径向渐变

径向渐变是从一个中心点向外扩散的圆形或椭圆形渐变。颜色从中心开始,沿着半径方向逐渐过渡到边缘。

常见用途:模拟光晕、按钮立体感、背景高光等。

关键特点:

  • 渐变方向是“由内向外”呈放射状
  • 可以定义形状(circle 或 ellipse)和大小
  • 支持设置圆心位置(如 center、top left 等)
示例:

background: radial-gradient(circle at center, red, yellow); —— 从中心红变黄,呈圆形扩散

conic-gradient:锥形渐变

锥形渐变是围绕一个中心点按角度旋转的颜色过渡,就像饼图或色轮一样。颜色是沿着圆周方向变化的,而不是沿半径。

常见用途:饼图、色轮、角度指示器、装饰性背景。

关键特点:

  • 颜色围绕中心点“旋转式”过渡
  • 基于角度(deg、rad)来控制颜色分布
  • 起始角度默认为顶部(0deg),顺时针展开
示例:

background: conic-gradient(from 0deg, red, orange, yellow); —— 颜色像钟表一样从上开始顺时针变化

核心区别总结

radial-gradient 是“从点往外发散”,conic-gradient 是“绕点旋转渐变”。

想象一下:

  • radial-gradient 像墨水滴在纸上向四周晕开
  • conic-gradient 像披萨被切成不同颜色的扇形块

基本上就这些。选择哪个取决于你要实现的视觉效果——要放射光感用 radial,要角度分布用 conic。