radial-gradient用于创建中心向外的渐变，语法为background: radial-gradient(形状/大小/位置, 颜色停止点)；默认椭圆，可设circle、位置at top left等，支持尺寸关键词如farthest-corner和颜色节点，.box{background:radial-gradient(red,yellow,green)}从中心红到黄绿过渡，可叠加多个渐变实现光斑效果。
使用 CSS 的 radial-gradient 可以创建从一个中心点向外扩散的渐变效果。它非常适合用于背景、按钮、卡片等需要视觉层次感的设计元素。
基本语法
background: radial-gradient(形状或大小, 颜色停止点1, 颜色停止点2, …);
最简单的形式只需要指定颜色，浏览器会自动计算中心位置和渐变类型。
示例：
.box { background: radial-gradient(red, yellow, green);}
这个例子从中心开始，颜色从红色过渡到黄色再到绿色。
立即学习“前端免费学习笔记（深入）”；
设置渐变形状
默认是椭圆（ellipse），也可以设为圆形（circle）。
radial-gradient(circle, red, blue) —— 圆形渐变 radial-gradient(ellipse, red, blue) —— 椭圆渐变（默认）
如果容器宽高不一致，ellipse 会拉伸适应，而 circle 要求半径一致，超出部分不会显示完整圆。
控制大小和位置
可以指定渐变的起始位置和结束形状的大小。
Revid AI
AI短视频生成平台
96 查看详情 
位置：用 at center、at top left 或具体值如 at 20% 80% 尺寸关键词：closest-side、farthest-corner（常用）、closest-corner、farthest-side示例：角落开始的渐变
.box { background: radial-gradient(circle at top left, white, black);}
这个渐变从左上角开始，向右下方向扩展。
使用尺寸关键词
.fancy-bg { background: radial-gradient(closest-side circle at center, #ffcc00, #ff3366);}
渐变在碰到最近的边时结束，适合做聚焦光晕效果。
添加颜色停止点
你可以精确控制每种颜色在什么位置出现。
.stop-example { background: radial-gradient(red 10%, yellow 50%, green 90%);}
红色从 10% 开始，黄色在 50%，绿色到 90% 结束。中间区域平滑过渡。
还可以叠加多个径向渐变，用逗号分隔：
.multi-gradient { background: radial-gradient(circle at 20% 30%, rgba(255,0,0,0.5), transparent 20%), radial-gradient(circle at 80% 70%, rgba(0,255,0,0.5), transparent 20%), blue;}
这可以创建多个光斑叠加在蓝色背景上的效果。
基本上就这些。掌握 radial-gradient 的关键是理解形状、位置、尺寸和颜色分布之间的关系。多试几种组合，就能做出丰富的视觉效果了。不复杂但容易忽略细节。
以上就是如何用css radial-gradient创建径向渐变的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1042165.html
微信扫一扫 
支付宝扫一扫 
