如何制作透明边框

Question

我想做下面的事情。边框将是透明的，背景将看起来是任何颜色。

解决方案https://medium.com/@ventrebleu/the-case-for-crescent-shaped-avatars-2f4ccd48d053

Answer 1

最简单的方法是将边框设置为背景色。我不确定是否有混合模式选项。下面假设：

1. 背景颜色为纯色
2. 您可以访问背景色
3. 您可以控制边框颜色的设置

.red {
  background: red;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.blue {
  background: blue;
}

container {
  display: inline-block;
  padding: 1rem;
}

circle {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-radius: 2rem;
  border: 0.5rem solid blue;
}

circle+circle {
  margin-left: -2rem;
}

<container class="blue">
  <circle class="red"></circle>
  <circle class="green"></circle>
  <circle class="yellow"></circle>
</container>

评论

重要的是要指出，这个答案与所要求的略有不同。人们要求的是一个透明的边框，该边框从基础元素中减去并显示背景（可能是蒙版）。这样，如果图像在背景中，则图像将显示在空间之间。

我对CSS启示知之甚少，无法说明这种情况；它肯定在混合模式和蒙版方面取得了进步，因此我不会阻碍形状修剪的可能性。我将其留给更有经验的人。