CSS如何使内部的div边框半径与外层div边框半径

.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。但是我在右角看到了黄色。

来源

2017-08-30 Mukil Deepthi

效果几乎不明显（因为您指定了无效的背景颜色值，因此您的代码完全不会发生;因为您指定了无效的背景颜色值;下次请创建实际的[mcve]）;似乎并没有发生，如果你这样做，而不是这样做，把一个10px宽的边界留在内部股利，并削减外部溢出：https：//jsfiddle.net/cxo3gfgz/（或边界 - 内部div的半径为9px，如果你不能减少溢出，https://jsfiddle.net/cxo3gfgz/1/） – CBroe

减少的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>

来源

2017-08-30 11:22:44

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

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

来源

2017-08-30 11:08:55

我想，以达到准确地按照你的形象，你可能需要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>

希望它能帮助。

来源

2017-08-30 11:24:50

CSS如何使内部的div边框半径与外层div边框半径

回答

相关问题