我将如何去做CSS3中的这个边框？

Question

我该如何去做这个CSS3/HTML5？

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

Answer 1

既然你已经有2个集装箱，您可以使用2对伪元素的角落，像这样：

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

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

Answer 2

也有同样的问题问here了一些答案，应该帮助的。