CSS实现径向渐变技巧

CSS中的径向渐变（radial-gradient()）是一种强大且灵活的视觉工具，仅需两个颜色即可快速创建从中心向外扩散的圆形或椭圆渐变效果，还能精细控制形状、尺寸、圆心位置、多色过渡及色标停顿，轻松模拟光照、聚焦和球面质感；它语法简洁、兼容性优秀（现代浏览器全面支持），是提升UI层次感与设计表现力的必备技巧。

要用 CSS 实现径向渐变效果，直接使用 radial-gradient() 函数即可。它比线性渐变更灵活，能模拟光照、聚焦、球面等视觉效果。

基础语法和必填参数

radial-gradient() 至少需要两个颜色值，浏览器会自动按圆形、从中心向外扩散的方式渲染。最简写法：

这表示从中心开始由红变蓝的圆形渐变。默认形状是椭圆（ellipse），默认尺寸是 farthest-corner（到最近角的距离为半径终点）。

控制形状和大小

可通过关键字或长度值明确指定渐变的形状与范围：

• 形状：用 circle（正圆）或 ellipse（椭圆），如 radial-gradient(circle, red, blue)
• 尺寸：常用 closest-side（到最近边）、farthest-side、closest-corner、farthest-corner
• 位置：加 at x y 指定圆心，例如 radial-gradient(circle at 20% 30%, #fff, #000)

多色与色标控制

像线性渐变一样，可以插入多个颜色，并指定具体位置（百分比或长度）：

也可以让某段颜色“悬停”，制造高光或过渡带：

这样就在左上区域做出一个白色高光圆斑。

兼容性与实用建议

现代浏览器（Chrome 10+、Firefox 16+、Safari 5.1+、Edge 12+）都支持标准写法，无需前缀。注意两点：

• 不要遗漏括号内的至少两个颜色，否则声明无效
• 若背景需透明底色，确保最后一个颜色含 alpha（如 rgba(0,0,0,0)）或用 transparent
• 可配合 background-size 和 background-position 微调重复渐变图案

今天关于《CSS实现径向渐变技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！