现在有一个div,其class为 div-parent
他有一个子div,其class为 div-child,代码如下所示
<div class="div-parent">
<div class="div-child">
</div>
</div>
他们的样式这么定义:
.div-parent{
background-color:#000;
border:5px solid #f00;
border-radius: 150px;
position:relative
overflow: hidden;
width: 150px;
height: 150px;
}
.div-child{
background-color: #fff;
position:absolute;
border-radius: 150px;
width:100%;
height:100%;
left:0px;
top:0px;
}
原本的设想是,子div能够完全填充父div的,但实际上..
仔细看就会发现,有一圈黑色的没有被覆盖到,求问怎么解决这个问题.
于是乎我把外面那圈红色给去掉了,还是有那么一圈黑色的,这样子看更明显~补张图
这个并不是不能完全填充的问题,你可以把圆角去掉看看,黑边就不见了。
这个是因为圆角即便给到了100%,边框实际上也并不是一个真正的圆,所以里圆跟外圆并不是一个比例缩放的关系。
奇葩的需求 -> 奇葩的结果
这个玩意儿一个 div background:white
就能实现不知道你要放另一个干什么
另外你这 css 写得也是醉position: absoluted
是什么鬼?
新手,权当愚见,莫怪。
你的
`background-color:#000;`
是什么用意?
貌似这个删除了就没有黑边了
刚试了一下 找到个解决方案
样式:
.div-parent{
background-color: #000;
border: 5px solid #f00;
border-radius: 150px;
position: relative;
width: 150px;
height: 150px;
}
.div-child{
background-color: #fff;
position: absolute;
border-radius: 150px;
width: 101%;
height: 101%;
top: -1px;
left: -1px;
}