html5 - css中设置有border-radius的时候,其子元素不能够完全填充父元素?

Question

现在有一个p,其class为 p-parent

他有一个子p,其class为 p-child,代码如下所示

<p class="p-parent">
    <p class="p-child">
    </p>
</p>

他们的样式这么定义:

.p-parent{
        background-color:#000;
        border:5px solid #f00;
        border-radius: 150px;
        position:relative
        
        overflow: hidden;

        width: 150px;
        height: 150px;

    }

    .p-child{
        background-color: #fff;

        position:absolute;
        
        border-radius: 150px;

        width:100%;
        height:100%;
        left:0px;
        top:0px;
    }

原本的设想是,子p能够完全填充父p的,但实际上..

仔细看就会发现,有一圈黑色的没有被覆盖到,求问怎么解决这个问题.

于是乎我把外面那圈红色给去掉了,还是有那么一圈黑色的,这样子看更明显~补张图

Answer 1

奇葩的需求 -> 奇葩的结果
这个玩意儿一个 p background:white就能实现不知道你要放另一个干什么

另外你这 css 写得也是醉
position: absoluted 是什么鬼？

Answer 2

刚试了一下 找到个解决方案

样式：

    .p-parent{
        background-color: #000;
        border: 5px solid #f00;
        border-radius: 150px;
        position: relative;
        width: 150px;
        height: 150px;
    }

    .p-child{
        background-color: #fff;
        position: absolute;
        border-radius: 150px;
        width: 101%;
        height: 101%;
        top: -1px;
        left: -1px;
    }

Answer 3

新手，权当愚见，莫怪。
你的

`background-color:#000;`

是什么用意？
貌似这个删除了就没有黑边了

Answer 4

这个并不是不能完全填充的问题，你可以把圆角去掉看看，黑边就不见了。

这个是因为圆角即便给到了100%，边框实际上也并不是一个真正的圆，所以里圆跟外圆并不是一个比例缩放的关系。