代码之家 › 专栏 › 技术社区 › Vald

如何添加透明边框?

border css html

Vald · 技术社区 · 7 年前

当背景是单一颜色时很容易,我只需要添加一个具有相同颜色的边框,但是当背景是渐变色或图像时怎么办?如果我添加一个白色的边框,它看起来像中间的图像,我希望有一个渲染像正确的图像。

如何做到这一点?

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

2 回复 | 直到 7 年前

推荐文章

Brendan · 如何在Flatter中创建圆形化身周围的虚线边框

4 年前

jpgerb · 为什么寄宿生在桌子上的表现不同?

4 年前

Ponsiva · 有可能只在左边框上做一个渐变吗?

4 年前

rahulkesharwani · 使用CSS合并节标记的边框颜色

8 年前

steerr · 如何通过CSS去除色带边框?

8 年前

Mohammed Sabir · 如何使用css更改4个部分中边界半径的不同颜色集

8 年前

Whazz · 是否可以将WPF边界的BorderBrush绑定到ViewModel类中的变量?

8 年前

bellotas · 边框CSS-意外行为

8 年前

lhermann jfriend00 · Chrome:不透明度对象上的边框宽度不一致

8 年前

Zhihar · css:带背景的选项卡样式边框

8 年前