使用圆角时，子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>