如何实现圆形局部不与另一圆形应用mix-blend-mode混合效果？

安全阿岳

2026-5-21

实现局部圆形区域的混合模式效果

嘿，我懂你想要的效果——让绿色圆形的左上部分和白色圆形应用mix-blend-mode混合，右上部分保持原本样式不参与混合对吧？这里有个可行的方案，通过拆分元素+裁剪来精准控制混合范围：

核心思路

将绿色圆形拆分为左上混合区域和右上非混合区域两个独立元素
仅给左上区域的元素添加混合模式属性
用clip-path裁剪出对应圆形区域，拼接后还原完整圆形

完整代码示例

HTML结构

<div class="circle-group">
  <div class="white-circle"></div>
  <!-- 左上混合区域 -->
  <div class="green-circle green-circle--top-left"></div>
  <!-- 右上非混合区域 -->
  <div class="green-circle green-circle--top-right"></div>
</div>

CSS样式

.circle-group {
  position: relative;
  width: 100px;
  /* 给容器加个深色背景，方便看到混合效果 */
  background: #222;
  padding: 20px;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 20px;
}

.white-circle {
  background-color: #fff;
  margin-bottom: -50px;
  position: relative;
  z-index: 1;
}

.green-circle {
  background-color: #0f0;
}

/* 左上区域：添加混合模式+裁剪 */
.green-circle--top-left {
  mix-blend-mode: screen;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  z-index: 2;
}

/* 右上区域：仅裁剪，无混合 */
.green-circle--top-right {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  z-index: 2;
}