css - css三重边框？

Question

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

我一直在关注这篇博文。JSF中。

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

score 3 · Accepted Answer

所以本质上问题是你使用绝对位置并从磨损元素计算东西。

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

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

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

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

好的，现在我们又回到了原始盒子外边缘的订单，所以我们只需要将它带到我们外边界的中间，所以我们只需将尺寸更改为大约一半，最后给我们我们想要的想：

1 回答 1