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邊框半徑

回答

相關問題