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

Question

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

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

Answer 1

我相信需要三个 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。