如何创建一个内部有圆角的容器？ [复制]答案

【问题标题】：How to create a container with rounded corners inside? [duplicate]如何创建一个内部有圆角的容器？ [复制]
【发布时间】：2020-05-21 19:17:41
【问题描述】：

我需要在 Html + CSS 中创建类似的东西。

我认为至少可以通过两种方式实现：

1) 创建一个有 4 个矩形和 4 个圆角的盒子（代码比较多，但是如果我想滚动背景内容，它会很容易固定位置）。

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

WWYD 还是有其他更简单的方法？

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

【问题讨论】：

看看border-radius。
来自副本：stackoverflow.com/a/59383914/8620333

标签： javascript html css

【解决方案1】：

您可以简单地使用 2 个带有边框和半径的 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>

【讨论】：

谢谢。我可以用这个做点什么，但你已经帮了很多忙了:)

【解决方案2】：

如果您不想使用 2 个 DOM，请使用 pseudo element :before

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%;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

告诉我更多帮助
没有按照我的意愿进行，另一个答案对我的帮助更大，我使用了高度：100vh。只需要更好的填充、边距等。