您好，我正在尝试使用 CSS 创建三重边框。现在我得到的是两个边框，但第二个边框没有完全围绕元素 (div.container#main)。
我一直在关注这个 blog post . JSFiddle .
任何让边框完全围绕元素的帮助都会很棒。
最佳答案
所以本质上，问题是您正在使用位置绝对值并根据磨损元素进行计算。
当某些东西被绝对定位时，只有在指定高度或元素有内容时才会增加高度。在这种情况下，解决方法是同时分配 top 和 bottom 值，这实际上会使元素扩展。您忘记了 bottom 值。添加它给我们这个:
但是您现在会注意到该元素位于视口(viewport)的底部。这是因为没有定位的父级(相对、绝对、静态)它默认为顶级元素作为定位的上下文。
为了解决这个问题，我们可以添加一个额外的包装元素并赋予它相对位置，或者我们可以将我们的边框样式移动到您的 div.row 上；无论哪种方式，技术都是相同的，只是取决于您是否可以添加另一个包装器，或者 div.row 是否适合您的情况。所以这给出了这个:
现在您可以看到我们实际上让内部边框与盒子的尺寸协同工作。但是现在我们的位置已经关闭了。这是因为我们不是计算我们从外部元素 #main 的偏移量，而是从内到外工作，所以我们需要反转我们的测量值:
好的，现在我们又回到了原来盒子外缘的顺序，所以我们只需要把它带到外边界的中间，所以我们把测量值改成一半左右，最后给出我们想要什么:
关于css 三重边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15398958/