Question

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

我想为指示器添加一个透明边框，该边框要超过背景图像，如下面的图像。

当背景是单色时很容易，我只需要添加相同颜色的边框，但是例如当背景是渐变色或图像时该怎么办？如果我添加白色边框，则它看起来像中间的图像，并且我想要具有正确的图像的渲染。

如何实现？

.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>

Answer 1

我会像下面那样考虑SVG和mask：

const light = new THREE.DirectionalLight(
  'white',
  1,

)
light.shadow.mapSize.width = 512 * 12 // default is 512. doesnt do anything
light.shadow.mapSize.height = 512 * 12 // default is 512
light.castShadow = true
light.position.set(100, 100, 100)
scene.add(light)

light.shadowCameraVisible = true

.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);
}

Answer 2

边框：？px 边框颜色：rgba（255,255,255,0）

如何添加透明边框？

2 个答案: