css 三重边框？

Question

您好，我正在尝试使用 CSS 创建三重边框。现在我得到的是两个边框，但第二个边框没有完全围绕元素 (div.container#main)。

我一直在关注这个 blog post . JSFiddle .

任何让边框完全围绕元素的帮助都会很棒。

Answer 1

所以本质上，问题是您正在使用位置绝对值并根据磨损元素进行计算。

当某些东西被绝对定位时，只有在指定高度或元素有内容时才会增加高度。在这种情况下，解决方法是同时分配 top 和 bottom 值，这实际上会使元素扩展。您忘记了 bottom 值。添加它给我们这个:

http://jsfiddle.net/J3e9R/2/

但是您现在会注意到该元素位于视口(viewport)的底部。这是因为没有定位的父级(相对、绝对、静态)它默认为顶级元素作为定位的上下文。

为了解决这个问题，我们可以添加一个额外的包装元素并赋予它相对位置，或者我们可以将我们的边框样式移动到您的 div.row 上；无论哪种方式，技术都是相同的，只是取决于您是否可以添加另一个包装器，或者 div.row 是否适合您的情况。所以这给出了这个:

http://jsfiddle.net/J3e9R/3/

现在您可以看到我们实际上让内部边框与盒子的尺寸协同工作。但是现在我们的位置已经关闭了。这是因为我们不是计算我们从外部元素 #main 的偏移量，而是从内到外工作，所以我们需要反转我们的测量值:

http://jsfiddle.net/J3e9R/4/

好的，现在我们又回到了原来盒子外缘的顺序，所以我们只需要把它带到外边界的中间，所以我们把测量值改成一半左右，最后给出我们想要什么:

http://jsfiddle.net/J3e9R/1/