创建圆形渐变需使用radial-gradient()函数，定义形状为circle、中心点位置、尺寸及颜色停止点。例如：background: radial-gradient(circle at center, #ff7e5f, #feb47b); 配合border-radius可呈现完美圆形效果。
要用CSS的radial-gradient创建圆形渐变，核心就是定义渐变的中心点、形状（圆形是默认或明确指定）、尺寸以及一系列颜色停止点。它允许你从一个中心点向外扩散颜色，形成圆润或椭圆形的视觉效果，非常适合制作背景、按钮或各种装饰性元素。
解决方案
创建一个圆形渐变，我们主要会用到radial-gradient()函数。它的基本结构是这样的：radial-gradient([shape || size] [at position]?, color-stop-list)。
shape: 可以是circle（圆形）或ellipse（椭圆形）。如果我们想要一个正圆，明确写circle是个好习惯，尽管在某些尺寸下，ellipse也可能看起来像圆。size: 定义渐变的结束尺寸。常见的值有closest-side、farthest-side、closest-corner、farthest-corner。这些值决定了渐变半径如何计算，以容器的边缘或角落为参考。position: 渐变的中心点，默认是center。你可以用关键字（如top left）或百分比（如20% 30%）来指定。color-stop-list: 这是渐变的关键，由一系列颜色值和可选的位置组成，例如red, blue 50%, green。
一个简单的圆形渐变代码可能长这样：
.my-circle-gradient { background: radial-gradient(circle at center, #ff7e5f, #feb47b); /* 从中心点开始，由橙红色渐变到浅橙色 */ width: 200px; height: 200px; border-radius: 50%; /* 确保容器是圆形，渐变才更显眼 */}
这里我们指定了circle形状，中心点at center，然后从#ff7e5f平滑过渡到#feb47b。
立即学习“前端免费学习笔记（深入）”；
深入理解radial-gradient的形状与尺寸控制
说实话，radial-gradient的形状和尺寸控制一开始确实让人有点摸不着头脑，特别是那些closest-side之类的关键字。但一旦理解了它们背后的逻辑，你就能玩出很多花样。
首先是shape，circle和ellipse。circle很好理解，就是个正圆。而ellipse则是椭圆。如果你没有明确指定shape，且容器宽高不一致，radial-gradient默认会生成ellipse。我个人习惯是，如果想要正圆，就直接写circle，这样意图明确，代码也更清晰。
然后是size，这部分我觉得是radial-gradient最有意思也最容易混淆的地方。
closest-side: 渐变会延伸到离中心点最近的容器边。想象一下，如果中心在左上角，那渐变就只到左边和上边。farthest-side: 渐变会延伸到离中心点最远的容器边。这通常意味着渐变会覆盖整个容器。closest-corner: 渐变会延伸到离中心点最近的容器角。farthest-corner: 渐变会延伸到离中心点最远的容器角。这个值很常用，因为它能确保渐变覆盖整个容器，且边缘是平滑的。
举个例子，如果你把中心点放在top left，然后用farthest-corner，你会看到一个从左上角扩散开，一直延伸到右下角的圆形或椭圆形渐变。但如果用closest-side，渐变可能只占据容器的一小部分。
/* 例子：中心在左上角，渐变覆盖到最远的角 */.gradient-farthest-corner { background: radial-gradient(farthest-corner at top left, #a18cd1, #fbc2eb); width: 200px; height: 150px; /* 故意让宽高不一致，看ellipse效果 */}/* 例子：中心在中央，渐变只到最近的边 */.gradient-closest-side { background: radial-gradient(closest-side at center, #84fab0, #8fd3f4); width: 200px; height: 200px;}
通过调整at position和size的组合，我们能精确控制渐变在容器中的表现，是局部点缀还是铺满整个区域，都能灵活实现。这在设计一些光晕效果或者背景纹理时特别有用。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 
渐变色标（color stops）的精细化运用与常见陷阱
颜色停止点，也就是color-stop-list，是radial-gradient的灵魂所在。它决定了颜色如何变化，以及在什么位置变化。
最基础的用法就是列出颜色，比如red, blue, green。浏览器会自动计算它们之间的过渡。但更多时候，我们需要更精确的控制，这时候就需要指定颜色停止点的位置。
指定位置: red 0%, blue 50%, green 100%。这意味着红色从中心开始，蓝色在半径的50%处达到纯色，绿色在边缘。创建硬边: 如果两个颜色停止点的位置相同或非常接近，就会创建出类似“硬边”的效果，而不是平滑过渡。例如：red 0%, red 50%, blue 50%, blue 100%。这会使得渐变在50%处突然从红色变为蓝色。这在制作一些同心圆图案或者分隔线时非常有效。
我个人在实践中发现，一个常见的“陷阱”是期望颜色在某个点突然改变，但结果却是平滑过渡。这通常是因为没有为相邻的两种颜色设置相同的停止点。比如你想要一个红色的圆圈，外面紧接着一个蓝色的圆圈，如果写成radial-gradient(red 49%, blue 50%)，你可能会看到一个很窄的过渡带。正确的做法是radial-gradient(red 0%, red 49%, blue 50%, blue 100%)，这样在49%到50%之间就有一个几乎是硬边的过渡。
另一个小技巧是利用透明度。你可以让颜色从完全不透明渐变到完全透明，这在创建光晕、阴影或者半透明覆盖层时特别好用。例如：
.transparent-halo { background: radial-gradient(circle, rgba(255, 255, 0, 0.8) 0%, rgba(255, 255, 0, 0) 70%); /* 黄色光晕，从中心80%不透明度，到70%处完全透明 */ width: 150px; height: 150px;}
这种精细的控制，让radial-gradient不仅仅是简单的颜色过渡，更是一个强大的图形工具。
创造独特效果：结合背景、伪元素与动画的圆形渐变
radial-gradient的魅力远不止于此，当它与其他CSS特性结合时，能爆发出惊人的创造力。
多层渐变背景CSS允许我们为一个元素的background-image属性指定多个背景，用逗号分隔。这意味着我们可以叠加多个radial-gradient，创造出复杂的图案或深度感。比如，一个中心光晕外面再套一个纹理渐变。
.multi-gradient-bg { background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 40%), /* 右上角高光 */ radial-gradient(circle at center, #6a11cb 0%, #2575fc 100%); /* 主渐变 */ width: 300px; height: 200px; border-radius: 10px;}
这个例子中，我们在一个蓝紫色的主渐变上，叠加了一个白色的半透明光晕，让它看起来更有层次。这种技术在设计卡片背景或按钮时特别实用。
伪元素 (::before, ::after) 的妙用伪元素是另一个强大的工具，可以为元素添加额外的装饰层，而不需要额外的HTML标记。将radial-gradient应用到伪元素上，可以实现很多有意思的效果：
聚焦效果: 给一个元素添加一个::before伪元素，用radial-gradient模拟聚光灯效果，只照亮元素的一部分。装饰性图案: 在按钮下方用::after创建一个小的圆形渐变，作为点击时的涟漪效果或装饰。
比如，为一个按钮添加一个微妙的“光泽”：
.button-with-shine { position: relative; overflow: hidden; /* 确保伪元素不会溢出 */ background: #333; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer;}.button-with-
以上就是如何通过css radial-gradient创建圆形渐变的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1042390.html
微信扫一扫 
支付宝扫一扫 
