如何创建一个只在底部有边框和半径的div，在另一个有边框和半径的div中

Question

我需要一个组件，有一个框与border和border-radius和内部的这个组件，我需要一个头部与border*和border-radius在底部。

我写这个小提琴是为了更好地理解：Fiddle

代码：

​

border-1 {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 50px;
  border: 1px solid black;
  display: flex;
  border-radius: 3px;
}

border-2 {
  flex: 1 1 auto;
  border: 1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

<border-1>
  <border-2>

  </border-2>
</border-1>

​

预期结果：

​

​

但有时我会在添加一些填充或显示滚动条时得到以下结果：

​

​

有人能给我解释一下原因吗？谢谢。

Answer 1

这是您更改后的Fiddle。

您只需要将border:1px solid black;更改为border-bottom:1px solid black;，这样您的边框就只在底部。

结果如下所示：

​

​

以下是border 2的完整css：

border-2 {
  flex:1 1 auto;
  border-bottom:1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

​

border-1 {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 50px;
  border: 1px solid black;
  display: flex;
  border-radius: 3px;
}

border-2 {
  flex: 1 1 auto;
  border-bottom: 1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

<border-1>
  <border-2>

  </border-2>
</border-1>

​

Answer 2

对父对象使用position:relative，对子对象使用position:absolute

同时添加到子width:calc(100% - 2px); (-2px：1px表示右边界，+ 1px表示左边界)

​

border-1 {
    width:100px;
    height:100px;
    background-color:#ccc;
    margin:50px;
    border:1px solid black;
    display:flex;
    border-radius: 3px;
    position:relative;
}

border-2 {
  flex:1 1 auto;
  border:1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position:absolute;
  width:calc(100% - 2px);
}

<border-1>
  <border-2>
    
  </border-2>
</border-1>

​

Answer 3

希望你会发现它是有用的！

​

.outer{
width:300px;
border-radius:10px;
border:4px solid #000;
background-color:green;
height:200px;
}
.outer .inner{
max-width:100%;
border-radius:0px 0px 10px 10px;
border:4px solid #000;
background-color:red;
height:80px;
}

<div class="outer">
<div class="inner"></div>
</div>

​