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

Question

假设我有一个分配有边框的“div”元素。如果它的溢出规则设置为“隐藏”，“div”边界上的内容就会消失。

有什么办法可以克服这个吗？因为在我的场景中，让边界上的内容不消失是非常重要的。我也需要元素的边界来包含边界。

Answer 1

我相信实现这一点需要三个div's（也许有人可以提出两个div解决方案）。这是一个示例小提琴。三个嵌套div元素（这里的外部有.CropIt类）：

CSS

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

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

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

外部设置溢出以隐藏超过隐藏的边框。中间设置宽度和边框（外部必须与总宽度匹配或用于float收缩包装）。最里面的设置是负边距，将内容推到中间的边框上，并创建边框与中间的重叠div。