使用圓角時，子div不填充父分區

Question

根據標題，您可以看到問題here的演示。

下面是HTML代碼：

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

這裏是CSS代碼：

#inner{ 
    height: 100%; 
    width: 100%; 
    border-radius: 20px; 
    text-shadow: 5px 5px 5px #000000; 
    background-color: white; 
    opacity: 0; 
    -webkit-transition: opacity .5s linear; 
    -moz-transition: opacity .5s linear; 
    transition: opacity .5s linear; 
} 

#inner:hover{ 
    opacity: 1; 
} 

#outer{ 
    border: 6px solid #dcc5c5; 
    border-radius: 20px; 
    text-shadow: 5px 5px 5px #000000; 
    position: relative; 
    display: inline-block; 
    transition: all 0.5s ease-in-out; 
    background-color: red; 
    height: 200px; 
    width: 200px; 
} 

我已經試過各種建議here和here無解。

Answer 1

您正在使用margin-top：20px; 在此元素

#inner { 
    height: 100px; 

    background-color: #42749F; 
    width: 200px; 

    /* -1px here for to compansate for the outer border of the container */ 
    -moz-border-radius: 0 0 9px 9px; 
} 

刪除保證金，將填補父元素裏面

Working fiddle

Answer 2

在的問題是，孩子優先，如果父格說：

text-font: Sans-Serif 

但孩子說：

text-font: Arial 

優先考慮子部門的要素。換句話說，父母是「默認」。 「圓角」和「邊緣頂部」也是如此。 「邊際」優先。

只要確保這兩個是正確的。

Answer 3

我猜你在內部部門設置的邊界在這裏產生問題。刪除邊框會使子元素完全填充父項。

這是你在找什麼？如果你願意，你可以在評論中詳細說明。

.box { 
 
    position: relative; 
 
    overflow: hidden; 
 
    border-radius: 20px; 
 
    transition: all 0.5s ease-in-out; 
 
    background-color: red; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
.scratcher{ 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: white; 
 
    opacity: 0; 
 
    transition: opacity .5s linear; 
 
} 
 

 
.scratcher:hover{ 
 
    opacity: 1; 
 
}

<div class="box"> 
 
    <div class="scratcher">Scratcher</div> 
 
</div>

Answer 4

我注意到，如果你抵消包含的元素（.box_1/#outer）的border-width差（6px），與嵌套元素（#scratcher/#inner）的border-radius，你將填補角落空白。 （#scratcher/#inner）的border-radius的值減去6px。

#inner { 
 
    height: 100%; 
 
    width: 100%; 
 
    border-radius: 13px; 
 
    text-shadow: 5px 5px 5px #000000; 
 
    background-color: white; 
 
    opacity: 0; 
 
    -webkit-transition: opacity .5s linear; 
 
    -moz-transition: opacity .5s linear; 
 
    transition: opacity .5s linear; 
 
} 
 

 
#inner:hover { 
 
    opacity: 1; 
 
} 
 

 
#outer { 
 
    border: 6px solid #dcc5c5; 
 
    border-radius: 20px; 
 
    text-shadow: 5px 5px 5px #000000; 
 
    position: relative; 
 
    display: inline-block; 
 
    transition: all 0.5s ease-in-out; 
 
    background-color: red; 
 
    height: 200px; 
 
    width: 200px; 
 
}

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