css三重边框？

Question

你好，我试图用css创建一个三重边框。现在我得到的是两个边框，但第二个边框不完全围绕元素（div.container#main）。

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

上得到边界去围绕元素完全将是巨大的任何帮助。

Answer 1

所以基本上问题是你使用的位置aboslute和计算从拨错元件的东西。

当事情绝对定位只上涨高度指定高度时，或当元素有内容。一种用于在这种情况下的解决办法是分配一个都和top值bottom，这将基本上使元件exapand。您忘记了bottom的值。添加它给了我们这样的：

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

但是你会注意，现在的元素进入到视口的底部。这是因为如果没有定位的父级（相对，绝对，静态），它将默认为顶级元素作为定位上下文。

为了解决这个问题，我们可以添加一个额外的包装元素，并给它定位相对的，或者我们可以将我们的边框样式到你的div.row;无论哪种方式，技术是相同的，只是取决于您是否可以添加另一个包装或div.row是否适合您的情况。因此，让这样的：

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

现在你可以看到，我们其实有内部边界协同工作与框的尺寸。但是现在我们的立场是关闭的。这是因为，而不是计算我们从外部要素#main我们从内部工作补偿了，所以我们需要反转我们的测量：

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

好了，现在我们又回到了其在外部订单我们的原包装盒的边缘，所以我们只需要把它给我们的外边框的正中间，所以我们仅仅指刚测量改变的一半左右，终于给我们我们想要的东西：

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