带内边框的圆角

Question

你好可以在CSS中做吗？ 圆形背景，内部边框为2像素，如示​​例图片所示？

感谢您的提示。

Answer 1

尝试使用一些box-shadow

.wrapper {
  width: 300px;
  height: 150px;
  background: grey;
  border-radius: 20px;
  box-shadow: 0 0 0 5px grey inset, 0 0 0 7px white inset;
}

<div class="wrapper"></div>

Answer 2

这是另外两个基于@Bhuwan答案的解决方案，只有一个盒子阴影：

.wrapper {
  width: 200px;
  height: 120px;
  background: grey;
  border-radius: 20px;
  border:5px solid grey;
  box-shadow:0 0 0 2px white inset;
}
.wrapper1 {
  width: 200px;
  height: 120px;
  background: grey;
  border-radius: 20px;
  border:2px solid #fff;
  box-shadow:0 0 0 5px grey;
}

<div class="wrapper"></div>
<div class="wrapper1"></div>

使用伪元素的另一种方法：

.wrapper {
  width: 200px;
  height: 120px;
  background: grey;
  border-radius: 20px;
  border:5px solid grey;
  position:relative;
}
.wrapper:before {
  content:"";
  z-index:2;
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  border:2px solid #fff;
  border-radius:20px;
}
.wrapper1 {
  width: 200px;
  height: 120px;
  border-radius: 20px;
  border:5px solid grey;
  position:relative;
}
.wrapper1:before {
  content:"";
  z-index:2;
  position:absolute;
  top:2px;
  right:2px;
  left:2px;
  bottom:2px;
  background:grey;
  border-radius:13px;
}

<div class="wrapper"></div>
<div class="wrapper1"></div>

Answer 3

你可以在外部元素中创建另外两个元素，如下所示：

＆＃13;

＆＃13;

.round {
  border-radius: 2px;
  background: gray;
  width: 50px;
  height: 52px;
  padding: 2px;
}

.roundinner {
  border-radius: 2px;
  background: white;
  width: 50px;
  height: 50px;
  padding-top: 2px;
}

.roundinnerst {
  border-radius: 2px;
  background: gray;
  width: 46px;
  height: 48px;
  margin-left: 2px;
}

＆＃13;

<div class="round">
    <div class="roundinner">
        <div class="roundinnerst"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;