我將如何去做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了一些答案，應該幫助的。