本文详解如何通过多方向椭圆径向渐变叠加，消除传统 radial-gradient 的硬边问题，实现从中心实色平滑过渡至全透明边缘的视觉效果。
本文详解如何通过多方向椭圆径向渐变叠加，消除传统 radial-gradient 的硬边问题，实现从中心实色平滑过渡至全透明边缘的视觉效果。
在 CSS 中，单个 radial-gradient() 默认以圆形扩展，当指定 transparent 为终点色时，其“渐变结束位置”由元素尺寸和渐变形状隐式决定——这往往导致边缘残留可见色块或过渡不自然，尤其在带圆角（如 border-radius: 28px）的按钮中尤为明显。
根本原因在于：标准径向渐变（如 radial-gradient(circle, white, transparent)）的透明过渡区域是固定半径的，无法自适应容器边界；一旦渐变半径小于元素尺寸，边缘就会“戛然而止”，形成视觉上的硬边。
✅ 正确解法：四向椭圆径向渐变叠加
利用 radial-gradient(ellipse at <position>, <start-color>, <end-color>)</end-color></start-color></position>，分别从上、右、下、左四个方向各绘制一个以对应边缘为焦点的椭圆渐变，使透明区域精准覆盖整个外轮廓：
.btn::before {
background-image:
radial-gradient(ellipse at top, blue, transparent),
radial-gradient(ellipse at right, blue, transparent),
radial-gradient(ellipse at bottom, blue, transparent),
radial-gradient(ellipse at left, blue, transparent);
}-
ellipse at top：椭圆焦点位于顶部中点，渐变向下延伸，覆盖上半区； -
ellipse at right：焦点在右侧中点，渐变向左铺开，覆盖右半区； - 同理，
bottom和left分别覆盖下半区与左半区； - 四者叠加后，所有边缘均被柔和透明过渡覆盖，无任何色块残留。
? 关键技巧：
- 所有渐变使用
ellipse（非circle），因其能沿单一轴向拉伸，更贴合矩形/圆角容器的边界； - 颜色值必须显式包含 alpha 通道（如
rgba(0, 0, 255, 1)或blue+transparent），避免浏览器解析歧义； - 若需中心为白色、边缘蓝→透明，可将
blue替换为#4469ff，并确保起始色与设计一致； - 叠加顺序不影响透明效果，但建议保持逻辑顺序（top → right → bottom → left）便于维护。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 该方案依赖多背景图层叠加，旧版 Safari（radial-gradient(ellipse at ...) 支持较弱，生产环境建议添加
-webkit-前缀或使用 PostCSS 自动补全； - 不要混用
farthest-side等关键词——它们仍会受容器尺寸约束，无法解决边缘截断问题； - 若按钮尺寸动态变化，此方案依然有效，因每个
ellipse at <side></side>均基于当前元素盒模型实时计算焦点位置。
总结：与其反复调试单个径向渐变的尺寸参数，不如采用“分治策略”——用四个定向椭圆渐变协同覆盖全部边界。这是实现真正无缝透明边缘最可靠、兼容性佳且语义清晰的现代 CSS 方案。
