我有一个<div>元素,我想给它加一个边框。我知道我可以写style="border: 1px solid black",但这将在div的两侧增加2px,这不是我想要的。

我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。

有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?


当前回答

11年后,答案在这里:

只用提纲: 外形:0.2vw纯红色;

我希望我能帮助那些11年后也看到这个问题的人。

其他回答

为了在新旧浏览器之间保持一致的呈现,可以添加一个双容器,外部的容器具有宽度,内部的容器具有边框。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

这显然只在精确宽度比额外标记更重要的情况下才会发生!

雅虎这真的是可能的。我找到了。

对于底部边界:

div {box-shadow: 0px -3px 0px red inset; }

Top Border:

div {box-shadow: 0px 3px 0px red inset; }

11年后,答案在这里:

只用提纲: 外形:0.2vw纯红色;

我希望我能帮助那些11年后也看到这个问题的人。

你可以用偏移量来查看大纲,但这需要一些填充来存在于你的div上。或者你完全可以在里面放置一个边界div

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

你可能需要摆弄假边界div的边缘,以适合你喜欢的。

设置box-sizing属性为border-box:

div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:100 px; 身高:100 px; 边框:20px实体#f00; 背景:# 00 f; 保证金:10 px; } Div + Div { 边框:10px纯红色; } < div >你好!< / div > < div >你好!< / div >

它适用于IE8及以上版本。