怎样用 CSS 制作方形径向透明背景？

径向渐变在 CSS 中默认是圆形或椭圆形的，但实际项目里经常会有这样的设计稿：一块背景区域中心颜色饱满，向四个直角方向逐渐变透明，边缘依然是规整的方形轮廓。这种方形径向透明背景在卡片高亮、导航浮层、图片说明区等场景中非常常见。下面介绍几种可靠的实现方式，并分析各自的优劣。

一、理解 radial-gradient 的工作原理

要做出方形径向效果，首先得明白 radial-gradient() 函数的渐变中心默认位于元素中心，颜色从中心向边缘扩散。普通写法 radial-gradient(circle, #000 0%, transparent 70%) 会生成一个圆形的柔和过渡，因为渐变的终止形状是圆形。想让它变成方形，关键在于让渐变的形状跟随元素的四条边。

这里有一个容易被忽视的知识点：当渐变形状设置为 ellipse 或 circle 时，颜色停靠点的百分比是相对于渐变半径计算的；而如果使用 closest-side、farthest-corner 这类尺寸关键字，半径的参考系会发生变化。但即使这样，默认的径向渐变依然是椭圆轮廓，四个角的颜色衰减速度和四边中点不一致，直接用是无法得到均匀的方形过渡的。

二、核心方案：radial-gradient 配合透明色停靠

最简单直接的思路，是利用 mask-image 或者巧妙地组合多层渐变。先看纯 background 的写法，利用四个方向线性渐变叠加比较繁琐，更优雅的方式是使用 mask 遮罩：背景色正常铺满元素，然后用一个径向渐变的遮罩控制透明区域。

.square-radial {
  width: 400px;
  height: 300px;
  background: rgba(30, 60, 120, 0.9);
  /* 中心不透明，向四角渐隐 */
  -webkit-mask-image: radial-gradient(circle closest-side,
      #000 40%, transparent 100%);
  mask-image: radial-gradient(circle closest-side,
      #000 40%, transparent 100%);
}

上面的代码中，mask-image 定义了一张黑白遮罩图：黑色区域可见，透明区域被裁掉。closest-side 表示渐变半径取中心到最近边的距离，这样中心 40% 范围完全可见，之后逐渐透明，视觉上就形成了柔和的方形晕影。这种方案的优点是背景可以是任意颜色甚至图片，缺点是遮罩会连子元素一起裁剪，使用时要注意内容层级。

三、不用 mask 的纯渐变写法

如果不想影响子元素，可以直接在 background 上做文章。思路是放弃严格的径向形状，用两层渐变模拟：一层水平方向、一层垂直方向，利用 background-blend-mode 混合。不过更实用的技巧是接受渐变本身是椭圆的事实，通过设置 ellipse farthest-corner 让衰减范围覆盖到最远的角，从而让四边几乎同时变透明。

.square-fade {
  width: 400px;
  height: 300px;
  background: radial-gradient(
      ellipse farthest-corner at center,
      rgba(30, 60, 120, 0.95) 0%,
      rgba(30, 60, 120, 0.5) 55%,
      rgba(30, 60, 120, 0) 100%
  );
}

这个写法的过渡本质上是椭圆的，但由于 farthest-corner 以最远的角为终点，四条边中点处的透明度会比四角略高一点，肉眼上差别很小，绝大多数设计场景可以直接接受。它的优势是完全不影响元素内部的文字和子元素渲染，兼容性也更好，老版本浏览器基本都支持。

四、精确定制：用 clip-path 或 SVG 实现

如果对过渡形状要求严格，比如必须保证从中心到四条边的衰减距离完全相等，可以借助 SVG 的 radialGradient 配合 <rect> 实现，然后作为背景图嵌入。SVG 渐变的控制力更强，可以精确指定渐变单位。

<svg width="400" height="300">
  <defs>
    <radialGradient id="g" cx="50%" cy="50%" r="75%">
      <stop offset="40%" stop-color="#1e3c78" stop-opacity="0.95"/>
      <stop offset="100%" stop-color="#1e3c78" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <rect width="400" height="300" fill="url(#g)"/>
</svg>

把这段 SVG 内联到页面中，或者通过背景引入，就能得到边缘完全跟随矩形轮廓的渐变背景。需要注意的是，clip-path 本身只能裁剪出硬边形状，无法做柔和透明过渡，所以它适合与 mask 配合使用，单独使用达不到渐隐效果。SVG 方案的缺点是尺寸变化时需要保证 viewBox 自适应，否则非等比缩放会让渐变变形。

五、方案对比与选型建议

三种方案各有适用场景：mask-image 最灵活，背景可以随意替换，但要留意 Safari 需要 -webkit- 前缀；纯 radial-gradient 背景方案兼容性最好，实现也最简单，适合绝大多数需求；SVG 方案控制最精确，适合对视觉还原度要求苛刻的项目。实际开发中建议优先尝试第二种纯背景写法，效果不满意再升级到 mask 方案。

另外，给容器加上足够的内边距，让文字内容远离渐变边缘区域，可以避免文字落在半透明区域导致对比度不足的问题，这一点在深色渐变配浅色文字时尤其重要。如果渐变背景还需要支持动画，比如呼吸式的中心高亮，可以在外层套一个伪元素，对伪元素的 opacity 做过渡，性能远比直接动画化背景属性好得多。

CSS径向渐变透明背景mask-image修改时间：2026-09-09 20:58:58