能否在CSS的-webkit-mask-image中结合线性与径向渐变实现指定形状？

你想要的是顶部半圆+下半矩形的组合形状，只用单个div和-webkit-mask-image就能实现，你现有代码的问题在于渐变的组合逻辑不对，调整后代码如下：

body {
  background-image: url("https://picsum.photos/500");
  background-size: cover;
  background-repeat: no-repeat;
}

div {
  width: 500px;
  height: 500px;
  background: purple;
  -webkit-mask-image: 
    /* 顶部半圆：以顶部中心为圆心，白色区域显示，透明区域隐藏 */
    radial-gradient(circle at top center, white 50%, transparent 50%),
    /* 下半矩形：纯白色填充，作为底部的矩形区域 */
    linear-gradient(white, white);
  /* 两个渐变各占div的一半高度 */
  -webkit-mask-size: 100% 50%, 100% 50%;
  /* 分别定位到顶部和底部 */
  -webkit-mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
}

<div></div>

原理说明： #

• -webkit-mask-image支持多图层渐变，多个渐变会按顺序叠加显示
• 第一个径向渐变生成顶部的半圆区域，仅半圆部分保留白色（显示背景），其余透明
• 第二个线性渐变生成底部的矩形区域，全白色填充，确保下半部分完整显示
• 通过mask-size和mask-position将两个渐变分别固定在div的上半区和下半区，组合成目标形状

内容的提问来源于stack exchange，提问作者TK421