使用CSS mask-image实现圆角盒子时边角像素化问题求解

你通过mask-image结合径向渐变创建圆角盒子时出现的边角像素化，核心原因是渐变色标之间存在硬切换，且径向渐变的参数设置不够精准，导致渲染时出现锯齿边缘。

修正方案 #

调整径向渐变的尺寸和色标过渡逻辑，让透明与不透明区域平滑衔接，避免硬边界：

.shape {
  width: 50px;
  height: 50px;
  background: #f00;
  mask-image: radial-gradient(circle 50px at 0 0, transparent 49px, black 50px);
}

<div class="shape"></div>

关键调整点 #

• 缩小渐变圆尺寸：将circle 100px改为circle 50px，刚好匹配盒子左上角的圆角范围，避免过度渲染导致的模糊
• 平滑色标过渡：把原来的transparent 50px, black 21px调整为transparent 49px, black 50px，通过1px的过渡区间让边缘渲染更柔和，消除像素化

替代方案（如果场景允许） #

如果只是实现简单的圆角盒子，直接使用border-radius会更高效且无渲染问题：

.shape {
  width: 50px;
  height: 50px;
  background: #f00;
  border-top-left-radius: 50px;
}

内容的提问来源于stack exchange，提问作者sooraj s pillai