我如何在CSS3中创建这个边框？

Question

我如何在CSS3 / HTML5中进行此操作？

红色背景是div的背景。内部白色是另一个包含一些文本的div。

Answer 1

由于你已经拥有2个容器，你可以在角落使用两对伪元素，如下所示：

＆＃13;

＆＃13;

.outer {
  width: 120px;
  background: #a08;
  position: relative;
  padding: 30px;
}

.inner {
  height: 118px;
  background: #fff;
  border: 1px dashed #a08;
  flex: 1;
}

.outer::before, .outer::after, .inner::before, .inner::after {
  content: '';
  width: 20px;
  height: 20px;
  background: #a08;
  background-clip: padding-box;
  border: 1px dashed #a08;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
}
.outer::before {
  top: 20px;
  left: 20px;
}
.outer::after {
  top: 20px;
  right: 20px;
}
.inner::before {
  bottom: 20px;
  left: 20px;
}
.inner::after {
  bottom: 20px;
  right: 20px;
}

＆＃13;

<div class="outer">
  <div class="inner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有一个类似的问题Clear()提出了许多应该有用的答案。