如何创建内部圆角的容器？

Question

我需要在Html + CSS中创建这样的东西。我认为至少可以通过2种方式做到这一点：1）创建带有4个矩形和4个圆角的框（它更多的代码，但如果我想滚动背景内容，很容易固定位置）。2）只需用该颜色创建一个背景，然后在中心创建一个容器，并在该div中使用滚动javascript。WWYD还是有另一种更简单的方法？附言：在页面顶部，徽标（左），按钮/象形图（中）和配置文件（右） - 我可能会为其添加另一个容器。

Answer 1

您只需使用 2 个 div，其中的边框和半径为内部 div。请参阅此处：

#inside {

  border: 5px solid grey;

  padding: 10px;

  border-radius: 25px;

  height: 200px;

  background: grey;

}

#outside {

  border: 5px solid grey;

  padding: 10px;

  background: black;

}

<div id="outside">

  <div id="inside">

  </div>

</div>

Answer 2

如果你不想使用2 DOM使用伪元素：之前

body{

padding: 15px;

}

div{

height:120px;

width:150px;

background-color:black;

border-radius:20px;

position:relative;

}

div:before{

    content: '';

    position: absolute;

    height: 126%;

    width: 120%;

    background-color: red;

    z-index: -1;

    position: absolute;

    top: -13%;

    left: -10%;

}

<div></div>