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

Question

我需要在Html + CSS中创建这样的东西。

我认为至少可以通过2种方式做到这一点：

1）创建带有4个矩形和4个圆角的框（它更多的代码，但如果我想滚动背景内容，很容易固定位置）。

2）只需用该颜色创建一个背景，然后在中心创建一个容器，并在该div中使用滚动javascript。

WWYD还是有另一种更简单的方法？

附言：在页面顶部，徽标（左），按钮/象形图（中）和配置文件（右） - 我可能会为其添加另一个容器。

Answer 1

您只需使用 2 个 div，其中的边框和半径为内部 div。请参阅此处：#inside {&nbsp; border: 5px solid grey;&nbsp; padding: 10px;&nbsp; border-radius: 25px;&nbsp; height: 200px;&nbsp; background: grey;}#outside {&nbsp; border: 5px solid grey;&nbsp; padding: 10px;&nbsp; background: black;}<div id="outside">&nbsp; <div id="inside">&nbsp; </div></div>

Answer 2

如果你不想使用2 DOM使用伪元素：之前body{padding: 15px;}div{height:120px;width:150px;background-color:black;border-radius:20px;position:relative;}div:before{&nbsp; &nbsp; content: '';&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; height: 126%;&nbsp; &nbsp; width: 120%;&nbsp; &nbsp; background-color: red;&nbsp; &nbsp; z-index: -1;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: -13%;&nbsp; &nbsp; left: -10%;}<div></div>