gpt4 book ai didi

css 三重边框?

转载 作者:太空宇宙 更新时间:2023-11-04 00:04:35 26 4
gpt4 key购买 nike

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

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

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

最佳答案

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

当某些东西被绝对定位时,只有在指定高度或元素有内容时才会增加高度。在这种情况下,解决方法是同时分配 topbottom 值,这实际上会使元素扩展。您忘记了 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/

关于css 三重边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15398958/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com