CSS中radial-gradient()函数怎么用？通过径向渐变实现圆形渐变背景效果-css教程-PHP中文网

CSS中radial-gradient()函数怎么用？通过径向渐变实现圆形渐变背景效果

爱谁谁

发布： 2025-08-26 13:12:01

原创

1004人浏览过

径向渐变通过定义形状、大小、位置和颜色停止点，实现从中心向外扩散的平滑色彩过渡，适用于光晕、按钮高亮、纹理背景等视觉效果。

css中radial-gradient()函数怎么用？通过径向渐变实现圆形渐变背景效果

radial-gradient()

登录后复制

函数在 CSS 中，顾名思义，就是用来创建径向（圆形或椭圆形）渐变背景的。它能让你从一个中心点向外扩散，平滑地过渡颜色，非常适合实现那些带有“光晕感”或者“聚焦感”的视觉效果。想要做出一个漂亮的圆形渐变背景？这个函数就是你的核心工具，它能让你的设计元素瞬间获得深度和视觉吸引力。

径向渐变的核心在于定义渐变的形状、大小、起始位置和颜色停止点。最基础的用法，比如实现一个从中心向外扩散的圆形渐变，可以这样写：

.element {
    background: radial-gradient(circle, #ff0000, #0000ff);
    /* 默认从中心点开始，红色到蓝色 */
    width: 200px;
    height: 200px;
    border-radius: 50%; /* 确保容器是圆形，渐变才能完美匹配 */
}

登录后复制

这里

circle

登录后复制

指定了渐变是圆形，后面跟着的是颜色停止点。我个人在实践中发现，很多时候我们不只是想要简单的两种颜色过渡。比如，如果你想让渐变更柔和，或者有更多层次，可以加入更多的颜色：

.spotlight {
    background: radial-gradient(circle at center, #ffffff 0%, #ffff00 30%, #ff0000 60%, #000000 100%);
    /* 一个从白到黄到红再到黑的圆形渐变，中心是白色高亮 */
    width: 300px;
    height: 300px;
    border-radius: 50%; /* 确保容器是圆形 */
}

登录后复制

这个例子里，

at center

登录后复制

是默认值，但明确写出来能让意图更清晰。颜色后面的百分比，比如

0%

登录后复制

和

30%

登录后复制

，定义了颜色在渐变半径上的停止位置。我经常用这个来模拟一些按钮的点击效果或者焦点区域，感觉挺直观的，比纯色背景有意思多了。

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

深入理解

radial-gradient()

登录后复制

的形状与尺寸控制

很多初学者，包括我刚开始接触的时候，可能觉得径向渐变就只是“圆形”。但实际上，

radial-gradient()

登录后复制

远不止如此。它提供了

shape

登录后复制

和

size

登录后复制

两个关键参数，让你能玩出更多花样。

shape

登录后复制

可以是

circle

登录后复制

（圆形）或

ellipse

登录后复制

（椭圆形）。

circle

登录后复制

比较简单，半径在各个方向都一样；而

ellipse

登录后复制

则允许你在水平和垂直方向上有不同的半径，这在做一些不规则或特定比例的渐变时非常有用。比如，如果你想在一个矩形容器里创建一个充满容器的椭圆渐变：

.oval-gradient {
    background: radial-gradient(ellipse at center, #ffeb3b, #f44336);
    width: 400px;
    height: 200px;
}

登录后复制

然后是

size

登录后复制

，这个参数就有点意思了，它定义了渐变结束的形状大小。默认值是

farthest-corner

登录后复制

，这意味着渐变会扩展到离中心点最远的那个角。其他可选值包括：

```
closest-side
```
登录后复制
登录后复制
登录后复制
: 渐变扩展到离中心点最近的边。
```
farthest-side
```
登录后复制
: 渐变扩展到离中心点最远的边。
```
closest-corner
```
登录后复制
: 渐变扩展到离中心点最近的角。
你也可以用具体的长度值（如
```
200px
```
登录后复制
）或百分比（如
```
60%
```
登录后复制
）来精确控制。

举个例子，如果我想让一个渐变只覆盖元素的一小部分，并且是从中心向最近的边扩散：

.small-gradient {
    background: radial-gradient(circle closest-side at 20% 20%, #8bc34a, #4caf50);
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

登录后复制

在我看来，

closest-side

登录后复制

和

farthest-corner

登录后复制

是最常用的，它们能很好地适应容器大小，提供一种响应式的渐变体验。而当需要非常精确的控制时，我才会去用具体的像素值。理解这些尺寸关键字，能让你在设计时少走很多弯路，避免渐变效果超出预期或者显得不够饱满。我记得有一次就是因为没搞清楚

farthest-corner

登录后复制

和

closest-side

登录后复制

的区别，导致渐变在小屏幕上看起来很奇怪，后来才发现是尺寸定义的问题。

如何精确控制径向渐变的起始点与颜色分布？

仅仅知道渐变的形状和大小还不够，很多时候，我们还需要精确地控制渐变从哪里开始，以及颜色是如何在空间中分布的。这就要用到

position

登录后复制

和

color-stops

登录后复制

的更高级用法了。

position

登录后复制

参数通过

at

登录后复制

关键字来指定，你可以用关键词（如

top left

登录后复制

bottom right

登录后复制

center

登录后复制

）或者百分比（如

20% 30%

登录后复制

）来定义渐变的中心点。这就像给你的光源打光，决定了“光”从哪里发出。

.off-center-light {
    background: radial-gradient(circle at top left, #ffcc00, #ff6600);
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
}

登录后复制

我发现，当你想模拟一个手电筒的光束或者一个按钮被鼠标悬停时的局部高亮，改变

at

登录后复制

的位置就显得尤为重要。它能让渐变不再是呆板地居中，而是有了方向感。

至于颜色分布，也就是

color-stops

登录后复制

，这部分是渐变效果细腻与否的关键。每个颜色都可以带一个可选的位置值，通常是百分比。

如果不指定位置，颜色会均匀分布。
如果指定了位置，颜色会在那个点达到全值。
你甚至可以创建“硬停止”（hard stops），让两种颜色之间没有平滑过渡，就像这样：
```
.pie-chart-like {
  background: radial-gradient(circle, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
```
登录后复制
这个例子就创建了一个一半红一半蓝的圆形，这在做一些图表或者特殊UI元素时非常有用。在我日常工作中，我经常会尝试调整颜色停止点的位置，比如
```
rgba(0,0,0,0) 0%
```
登录后复制
到
```
rgba(0,0,0,0.8) 100%
```
登录后复制
来做一些透明度的渐变，模拟阴影或者模糊效果，这比直接用
```
box-shadow
```
登录后复制
登录后复制
灵活得多，尤其是在需要背景透明度变化的场景。

径向渐变在实际项目中还有哪些创意应用场景？

径向渐变不仅仅是背景那么简单，它的灵活性让它在很多地方都能发挥作用，远远超出我们一开始的想象。

一个常见的应用是制作按钮或交互元素的视觉反馈。比如，当鼠标悬停在一个按钮上时，可以改变其

background

登录后复制

，用一个小的、从鼠标位置发出的径向渐变来模拟光标下的高亮效果，这比单纯改变背景色要生动得多。

/* 假设按钮的Hover效果，需要JS动态设置CSS变量 --mouse-x 和 --mouse-y */
.button {
    position: relative;
    overflow: hidden; /* 隐藏溢出渐变 */
    /* ... 其他按钮样式 ... */
}
.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 确保不影响鼠标事件 */
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.button:hover::before {
    opacity: 1;
}

登录后复制

当然，这需要一点JavaScript来捕获鼠标位置并更新CSS变量，但效果非常棒，能给用户一种“光标触碰”的真实感。

此外，它还可以用来创建伪元素背景，实现一些复杂的纹理或装饰性图案。比如，一个带有圆形波纹的标题下划线，或者一个卡片右上角的“新”标签光晕。

.card {
    position: relative;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
    overflow: hidden; /* 确保伪元素不会溢出 */
}
.card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #4CAF50 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.7;
    z-index: -1; /* 让渐变在卡片内容之下 */
}

登录后复制

我甚至用它来模拟过一些3D球体或凹凸感，通过精心调整颜色和透明度，结合

box-shadow

登录后复制

，能让平面元素看起来有了深度。这需要一些对光影的理解，但一旦掌握，效果非常出彩。

最后，别忘了

radial-gradient()

登录后复制

也可以与

background-size

登录后复制

和

background-repeat

登录后复制

结合，创造出重复的圆形图案或点阵效果。这在制作一些背景纹理时非常有用，可以避免使用图片，从而提升加载性能。比如，一个简单的波点背景：

.dotted-bg {
    background: radial-gradient(circle at 10px 10px, #ccc 0%, #ccc 2px, transparent 2px, transparent 100%);
    background-size: 20px 20px; /* 控制点之间的间距 */
    width: 100%;
    height: 200px;
}

登录后复制

总之，径向渐变是一个强大且富有创意的工具。我的建议是，不要害怕尝试，多动手调整参数，你会发现它能解决很多意想不到的视觉挑战，让你的设计更上一

以上就是CSS中radial-gradient()函数怎么用？通过径向渐变实现圆形渐变背景效果的详细内容，更多请关注php中文网其它相关文章！