html – CSS溢出规则包括对象边框？

2023年7月29日 208次阅读

假设我有一个带有边框的“div”元素.如果它的溢出规则设置为“隐藏”,则“div”边框上的内容将消失.

有没有办法克服这个问题？因为在我的场景中,边框上的内容不会消失是非常重要的.我也需要元素的边界来包含边框.

最佳答案 我相信要实现这个目标需要三个div(也许有人可以提出两个div解决方案).这是
an example fiddle.三个嵌套的div元素(这里的外部有.CropIt类)：

CSS

.CropIt {
    overflow: hidden;
    width: 60px;
}

.CropIt > div {
    border: 20px solid red;
    width: 20px;
}

.CropIt > div > div {
    margin: -20px;
}

外部设置溢出以隐藏隐藏的边界.中间设置宽度和边框(外部必须与总宽度匹配或使用float来收缩包装).最里面的集合是将内容推到中间边界上的负边距,并创建边框与中间div的重叠.

点赞