关于overflow为hidden后border不会被子级覆盖的问题

最新推荐文章于 2022-04-19 16:01:03 发布

id_dimu

最新推荐文章于 2022-04-19 16:01:03 发布

阅读量1.8k

点赞数

分类专栏： demo 总结

本文链接：https://blog.csdn.net/id_dimu/article/details/92718239

版权

博客探讨了当设置`overflow:hidden`时，为何border不会被子元素覆盖的问题。内容涉及HTML和CSS代码示例，解释了`overflow:hidden`只隐藏border内内容的原理，并提供了两种解决方案：使用额外的包裹div或通过调整子元素宽度来自我隐藏。文章指出，选择哪种方法取决于父级和需要突出显示的元素之间的关系，同时提到性能方面的考量并未深入讨论。

摘要由CSDN通过智能技术生成

预期：从第一张图到第二张图，但是结果为第三张图。

html代码：

<div class="box">
	<div class="ball"></div>
</div>

css代码

.box{
    width:100px;
    height:100px;
    position: relative;
    border: 1px solid black;
    background-color: #f6f9fb;
    box-sizing: border-box;
    overflow: hidden;    //超出部分隐藏
}
.ball{
    position: absolute;
    width: 20px;
    height: 20px;
    border-ra