【问题标题】: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 还是有其他更简单的方法?

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

【问题讨论】:

标签: 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。只需要更好的填充、边距等。
猜你喜欢
  • 2010-09-12
  • 2011-11-07
  • 1970-01-01
  • 2011-06-08
  • 2014-12-26
  • 2023-03-26
  • 2019-10-02
  • 1970-01-01
  • 2010-09-24
相关资源
最近更新 更多