[编辑:澄清了box-sizing:border-box似乎不适用,因为我使用的是绝对定位]
以下代码说明了我的问题。我正在使用绝对定位,因为我发现这对于基于流的布局更为棘手,但我愿意接受建议。我想要的是围绕任意元素的边界,没有边界影响节点的定位。 (边框可能会被内容剪辑或覆盖,但这并不重要。)
特别是,父级的边框必须能够与其子级的边框重叠,这不是默认行为。 CSS box-sizing属性可以设置为border-box来实现我想要的效果,但只有(我相信)内联元素。它对具有绝对定位的元素没有影响(据我所知)。
因此,我的方法是使用负边距来抵消边界宽度的孩子的位置。这确实似乎抵消了边界存在的影响,但不幸的是,这种方式并不是在缩放因子之间保持一致的。在大规模,事情看起来不错。在Chrome浏览器的默认浏览器中,元素定位稍微偏离(它们看起来太高);如果我变小,那么元素位置会向另一个方向移动。
但如果我完全删除边框,布局似乎可以扩展。
所以我的问题是:是否有可靠(可扩展)的方式在HTML元素上设置边框而不影响元素的定位?
[在这个例子中,我为一些边框使用了不同的颜色。我想只看到黑色,但在某些变焦处我可以看到红色和绿色边框,表明元素的位置受到边框存在的影响。
谢谢Roly .bordered {position:absolute;身高:18px;边框:2px固体;保证金:-2px; }
<span class="bordered" style="width: 55px; left: 30px;">
<span class="bordered" style="width: 8px; left: 0;">
(
</span>
<span class="bordered" style="border-color: green; width: 47px; left: 8px;">
<span class="bordered" style="border-color: red; width: 39px; left: 0;">
<span class="bordered" style="width: 8px; left: 0;">
5
</span>
<span class="bordered" style="width: 31px; left: 8px;">
<span class="bordered" style="width: 23px; left: 8px;">
Nil
</span>
</span>
</span>
<span class="bordered" style="width: 8px; left: 39px;">
)
</span>
</span>
</span>
试试CSS2 outline
财产:
.bordered {
outline:2px solid blue;
}
大纲不影响元素位置。
你也可以使用CSS3 outline-offset
,如下所示:http://www.css3.info/preview/outline/
我还发现使用零宽度的边框(这样它不会影响布局),然后添加一个框阴影来模拟可见的边框,似乎运行良好。
六年后......
其他答案对我的情况不起作用,因为我造型的盒子已经有了一个盒子阴影。我需要一个像border-left
和border-radius
一样的边框,但没有影响元素位置或宽度的边框。我想出的解决方案是在绝对定位元素的内部元素上应用边框。
.outer {
position: absolute;
width: 200px;
height: 100px;
border-radius: 5px;
background-color: #c8c8c8;
}
.inner {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
border-left: solid 5px #097fee;
border-radius: 5px;
}
<div class="outer">
<div class="inner">
Some content
</div>
</div>