如何仅用CSS在Div盒子边缘特定位置添加多圆形遮罩？

需求说明 #

作为编程新手，想要给Div盒子边缘特定位置添加圆形遮罩（类似stampfinity首页渐变盒子的效果），使用WordPress Enfold主题的Quick CSS编辑样式，之前尝试的代码无法准确定位圆形，希望能按相对位置（如0% 80%）放置圆形，且适配盒子尺寸。

解决方案代码 #

直接在Enfold的Quick CSS中添加以下代码，通过CSS变量可以轻松调整圆形大小和位置：

.custom-mask-box {
  /* 可自定义的参数 */
  --mask-circle-size: 30px; /* 圆形遮罩的直径 */
  --mask-pos-left-bottom: 0% 80%; /* 左边缘80%高度处的圆形 */
  --mask-pos-right-top: 100% 20%; /* 右边缘20%高度处的圆形 */
  --mask-pos-bottom-center: 50% 100%; /* 底部中间的圆形 */
  
  /* 遮罩核心样式 */
  mask: 
    radial-gradient(circle var(--mask-circle-size) at var(--mask-pos-left-bottom), transparent 98%, #000),
    radial-gradient(circle var(--mask-circle-size) at var(--mask-pos-right-top), transparent 98%, #000),
    radial-gradient(circle var(--mask-circle-size) at var(--mask-pos-bottom-center), transparent 98%, #000);
  -webkit-mask: 
    radial-gradient(circle var(--mask-circle-size) at var(--mask-pos-left-bottom), transparent 98%, #000),
    radial-gradient(circle var(--mask-circle-size) at var(--mask-pos-right-top), transparent 98%, #000),
    radial-gradient(circle var(--mask-circle-size) at var(--mask-pos-bottom-center), transparent 98%, #000);
  
  /* 确保遮罩覆盖整个盒子 */
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

使用方法 #

1. 在Enfold编辑器中，给需要添加遮罩的Div元素设置自定义CSS类为custom-mask-box
2. 修改代码中的变量值：
   • 调整--mask-circle-size可以改变圆形遮罩的大小
   • 新增或修改--mask-pos-xxx变量定义新的位置，然后在mask和-webkit-mask中添加对应的radial-gradient行即可增加更多圆形遮罩
   • 位置参数用X% Y%表示：X控制水平位置（0%是左边缘，100%是右边缘），Y控制垂直位置（0%是顶部，100%是底部）

之前代码的问题分析 #

• 错误设置了mask-size为50% 50%，导致遮罩没有覆盖整个盒子，定位自然偏移
• 没有统一使用全尺寸遮罩，多个遮罩层叠逻辑混乱，无法精准控制每个圆形的位置

内容的提问来源于stack exchange，提问作者Mike D.crypted