如何相对于元素边界正确定位CSS mask？

要让绿色盒子左侧出现垂直居中的半圆形镂空，只需调整mask的径向渐变参数，精准控制圆心位置与透明区域范围：

修改后的CSS代码 #

div {
  background: green;
  /* 圆心定位在左侧垂直中点，20px半径内为透明镂空，其余区域保留绿色 */
  mask: radial-gradient(circle at left center, transparent 20px, black 20px);
}

body {
  background: pink;
}

HTML代码 #

<div style="width: 300px; height: 200px;"></div>

效果原理 #

• circle at left center：把径向渐变的圆心固定在盒子左侧的垂直中点
• transparent 20px：圆心向外20px的范围设为透明，形成半圆形镂空区域
• black 20px：超出20px的区域设为黑色，mask中黑色区域会显示原元素的绿色背景

这样设置后，绿色盒子左侧就会出现垂直居中的半圆形镂空，透出下方的粉色背景。

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