css如何将内部div边框半径与外部div边框半径对齐答案

【问题标题】：css how to align inner div border radius with outer div border radiuscss如何将内部div边框半径与外部div边框半径对齐
【发布时间】：2018-02-08 01:30:46
【问题描述】：

.outerdiv {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #646464;
  background-color: yellow;
  padding-left: 10px;
  margin-top: 10px;
  height: 200px;
}

.innerdiv {
  -webkit-border-radius: 0px 10px 10px 0px;
  -moz-border-radius: 0px 10px 10px 0px;
  border-radius: 0px 10px 10px 0px;
  background-color: white;
  height: 200px;
}

<div class="outerdiv">
  <div class="innerdiv">
  </div>
</div>

我正在尝试实现如附图所示。

我有黄色背景和边框半径为 10 的外部 div 和 padding-left:10px 以显示左侧的黄色条带。

我正在创建只有右上角和右下角边框半径的内部 div。但我的右上角变黄了。

【问题讨论】：

效果几乎不明显（并且您的代码根本不会出现，因为您指定了无效的背景颜色值；下次请创建一个实际的minimal reproducible example）；如果你这样做似乎不会发生，而是在内部 div 上放置一个 10px 宽的左边框，并为外部切割溢出：jsfiddle.net/cxo3gfgz（或者内部 div 的边框半径为 9px ，如果不能切溢出，jsfiddle.net/cxo3gfgz/1)

标签： html css

【解决方案1】：

将innerdiv 的border-radius 和一件你不需要使用浏览器指定的prefix 减少到border-radius

.outerdiv {
  border-radius: 10px;
  border: 5px solid #646464;
  background-color: yellow;
  padding-left: 10px;
  margin-top: 20px;
  height: 100px;
}

.innerdiv {
  border-radius: 0px 6px 6px 0px;
  background-color: white;
  height: 100px;
  width: 100%;
}

<div class="outerdiv">
  <div class="innerdiv">
    Testing
  </div>
</div>

【讨论】：

【解决方案2】：

这是因为.innerdiv处的border-radius，试着给它一个更小的半径

.outerdiv {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 5px solid #646464;
  background-color: yellow;
  padding-left: 10px;
  margin-top: 10px;
  height: 500px;
}

.innerdiv {
  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
  background-color: white;
  height: 500px;
  width: 100%;
}

<div class="outerdiv">
  <div class="innerdiv">
    Testing
  </div>
</div>

【讨论】：

【解决方案3】：

我想，要完全按照您的图像实现，您可能需要 3 个 div，然后只有您可以得到它。检查下面的sn-p，

.outer{
  width:200px;
  height:100px;  
  background-color:#000; 
  padding:5px;
}
.inner{    
  width:190px;
  height:100%;  
  padding-left:10px;  
  background-color:yellow;
  border-radius:5px;
}
.deep{
  width:100%;
  height:100%;
  background-color:#fff;
  border-radius:0 5px 5px 0;
}

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

希望对你有帮助。

【讨论】：