问

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

如痴如醉as_961 发布于 2022-11-07 02:04

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

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

他们的样式这么定义:

.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的,但实际上..

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

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

4 个回答

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

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

2022-11-12 01:37 回答

手机用户2502911027
新手，权当愚见，莫怪。
你的
```
`background-color:#000;`
```
是什么用意？
貌似这个删除了就没有黑边了
2022-11-12 01:37 回答

男人--沉默底线

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

样式：

    .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;
    }

2022-11-12 01:37 回答

撒药拿拉的唐小妄

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

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

2022-11-12 01:37 回答

WenFJ

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签