CSS可变边框宽度圆形遮罩

Question

我想知道是否有一种使用图像遮罩来实现类似于所示图像的方法？

不需要左上角蓝色效果。 我想要得到圆形遮罩。

任何帮助将不胜感激。

- Assad Nazar

Answer 1

使用具有相同背景的两个元素，并调整background-size/background-position以创建此效果的视觉错觉：

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  background-image:url(https://picsum.photos/id/1057/800/800);
  background-size:auto 220px;
  background-position:top left;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:-20px;
  left:0;
  width:100px;
  height:100px;
  background-image:inherit;
  background-size:inherit;
  background-position:bottom left;
  border-radius:inherit;
}

<div class="box">

</div>

这里有一种更通用的方式，使用CSS变量轻松控制它:

.box {
  --b:-20px; /* Bottom of the pseudo element*/
  --l:10px;  /* Left of the pseudo element*/
  --s:2; /*size of the pseudo element (as a scale factor)*/
  width:200px;
  height:200px;
  border-radius:50%;
  background-image:url(https://picsum.photos/id/1057/800/800);
  background-size:auto calc(100% - var(--b));
  background-position:top left;
  position:relative;
  display:inline-block;
}
.box:before {
  content:"";
  position:absolute;
  bottom:var(--b);
  left:var(--l);
  width:calc(100%/var(--s));
  height:calc(100%/var(--s));
  background-image:inherit;
  background-size:auto calc(100%*var(--s) - var(--b));
  background-position:bottom 0 left calc(-1 * var(--l));
  border-radius:inherit;
}

<div class="box"></div>

<div class="box" style="--s:3;l:50px;"></div>

<div class="box" style="--s:1.5;l:50px;--b:-10px"></div>

您可以轻松地添加边框：

.box {
  --b:-20px; /* Bottom of the pseudo element*/
  --l:10px;  /* Left of the pseudo element*/
  --s:2; /*size of the pseudo element (as a scale factor)*/
  width:200px;
  height:200px;
  border-radius:50%;
  background-image:url(https://picsum.photos/id/1057/800/800);
  background-size:auto calc(100% - var(--b));
  background-position:top left;
  position:relative;
  display:inline-block;
  border:2px solid blue;
  box-sizing:border-box;
}
.box:before {
  content:"";
  position:absolute;
  bottom:var(--b);
  left:var(--l);
  width:calc(100%/var(--s));
  height:calc(100%/var(--s));
  background-image:inherit;
  background-size:auto calc(100%*var(--s) - var(--b));
  background-position:bottom 0 left calc(-1 * var(--l));
  border-radius:inherit;
  border:inherit;
  box-sizing:inherit;
}

<div class="box">

</div>

<div class="box" style="--s:3;l:50px;">

</div>

<div class="box" style="--s:1.5;l:50px;--b:-10px">

</div>

- Temani Afif

---

谢谢@Temani。您能指导一下边框的问题吗？蓝色的还好处理，但是白色的边框只在图片的某些部分可见。 - Assad Nazar

@booota 这个链接可能对你的边框问题有所帮助：https://dev59.com/Fq7la4cB1Zd3GeqPZDQ4#52205730 - Temani Afif

再次感谢。我刚刚注意到这是通过使用图像作为背景来完成的。我们能否使用图像标签来实现它？ - Assad Nazar

@booota 我不这么认为，因为主要的技巧是依赖于背景，我可以使用背景属性来模拟这个。 - Temani Afif