css如何将内部div边界半径与外部div边界半径对齐

Question

.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>

我正试图在附图中实现。

我有外部div，背景为黄色，边框半径为10，左边是填充：10px，左边是黄色条纹。

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

Answer 1

减少border-radius的{​​{1}}，并且您不需要使用指定浏览器innerdiv到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%;
}

Answer 2

由于border-radius上的.innerdiv，请尝试给它一个较小的半径

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我想，要完全按照你的形象来实现，你可能需要3个div，然后才能得到它。请查看下面的代码段，

.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>

希望它有所帮助。