如何添加透明边框？ [复制]答案

【问题标题】：How to add a transparent border? [duplicate]如何添加透明边框？ [复制]
【发布时间】：2021-04-06 17:24:59
【问题描述】：

我有一个简单的用户个人资料图片和一个绿色状态指示器。

我想给指示器添加一个透明边框，它超过了背景中的图像，如下图。

当背景是单色时很简单，我只需要添加一个相同颜色的边框，但是当背景是渐变或图像时怎么办？如果我添加一个白色边框，它看起来像中间的图像，我想要一个像右图一样的渲染。

如何实现？

.user {
  display: inline-block;
  position: relative;
}
img {
  width: 75px;
  height: 75px;
  border-radius: 75px;
}
.user-state {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background: #57d642;
}

<body>
  <div class="user">
    <img src="http://lorempicsum.com/up/255/200/5" alt="">
    <div class="user-state"></div>
  </div>
</body>

【问题讨论】：

基本上，你不能。您可能需要一个剪辑路径来将图像剪辑到该特定形状。

标签： html css border

【解决方案1】：

我会考虑使用 SVG 和 mask，如下所示：

.user {
  display: inline-block;
  position: relative;
}

svg {
  width: 200px;
  height: 200px;
}

.user:after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #57d642;
}

body {
  background: linear-gradient(to right, pink, purple);
}

<div class="user">
  <svg viewbox="0 0 200 200">
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- This circle is your hole on the top -->
      <circle r="28" cx="162" cy="38" fill="black"/>
    </mask>
    <!-- the clipath will replace border-radius -->
    <clipPath id="circle">
       <circle cx="100" cy="100" r="100" fill="white" />            
    </clipPath>
  </defs>
<image width="200" height="200" xlink:href="https://picsum.photos/id/1003/200/200" mask="url(#hole)" clip-path="url(#circle)"/>
</svg>
</div>

【讨论】：

有什么方法可以用纯css实现吗？

【解决方案2】：

边框：?px 边框颜色：rgba(255,255,255,0)

【讨论】：

我认为你误解了这个问题。
为什么？ Rgba 是为了有边界，但你让它透明
但这不会使在它后面的对象的背景透明！在图像中查看所需的输出。
我认为应该。如果有边界，并且您使该边界透明，您将获得所需的确切信息。可见边框但透明，因此渐变背景显示为 3d 图片中的效果
试试吧...它不会切入图像。再次，查看所需结果的图像。