Css中的相机视图角边框

Question

这个问题没有更具体。我想这么常见，因为大多数Web开发人员都遇到这个问题。

我们都知道相机视图的四个角有边框，但在右/左/下/上没有边框。

我们如何使用CSS达到这种效果？

html

<div id="div1" />
<div id="div2" />

css

#div1 {
   position:absolute;
   top:9px;
   left:9px;
   height:100px;
   width:100px;
   background-color:white;
   border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

我是这样实现的。现在我想知道如何仅使用一个div

Answer 1

您应该使用父级->子级逻辑 例如：

<div class="parent"><div class="child"></div></div>

示例： Codepen