有没有办法构建三重边界，中间和最里面的边界线只跨越四个角中的两个？

Question

我想创建以下边界。

在外部-实心白色边框与圆角通过边框半径。在中角，只有实心白色边框，圆角仅在边框的左上角和右下角可见。在最内角，只有实心白色边框，圆角与中间边框的最大长度相吻合，只有在边框的左上角和右下角可见。

我试着把它应用到一个带有ccs之前和之后的边框上，这让我可以轻松地创建三条线，但是我不能像我希望的那样设计内部和中间的线。

.corner-adored-white-border {
    position: relative;
    border: 1px solid white;
    padding: 10px;
    border-radius: 9px;
    margin: 10px;
}

.corner-adored-white-border:before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border: 1px solid white;
    border-radius: 8px;
}

.corner-adored-white-border:after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border: 1px solid white;
    border-radius: 8px;
}

Answer 1

这里有一个带有伪元素和方框阴影的想法

css prettyprint-override">.box {
  width:250px;
  height:100px;
  border:2px solid;
  border-radius:10px;
  position:relative;
  z-index:0;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:30px;
  height:30px;
  border:2px solid;
}
.box:before {
 top:5px;
 left:5px;
 border-right:0;
 border-bottom:0;
 border-top-left-radius:10px;
 box-shadow: 
  5px 5px 0 inset #fff, 
  7px 7px 0 inset #000;
}
.box:after {
 bottom:5px;
 right:5px;
 border-left:0;
 border-top:0;
 border-bottom-right-radius:10px;
 box-shadow: 
  -5px -5px 0 inset #fff, 
  -7px -7px 0 inset #000;
}

<div class="box">

</div>