html - 使用圆 Angular 时子 div 不填充父 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

您正在使用 ma​​rgin-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