我有一个<div>元素,我想给它加一个边框。我知道我可以写style="border: 1px solid black",但这将在div的两侧增加2px,这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?
我有一个<div>元素,我想给它加一个边框。我知道我可以写style="border: 1px solid black",但这将在div的两侧增加2px,这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?
当前回答
也许这是一个迟来的答案,但我想分享我的发现。我发现了2种解决这个问题的新方法,这是我在答案中没有发现的:
内边框通过box-shadow css属性
是的,box-shadow用于为元素添加box-shadow。但你可以指定嵌入阴影,它看起来像一个内边框,而不是一个阴影。你只需要将水平和垂直阴影设置为0px,并将盒子阴影的“spread”属性设置为你想要的边界宽度。所以对于10px的“内”边框,你可以这样写:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
下面是一个jsFiddle示例,演示了盒影边框和“正常”边框之间的区别。这样你的边框和盒子宽度总共是100px,包括边框。
更多关于box-shadow的内容:这里
通过outline css属性设置边框
这是另一种方法,但这种方法的边界将在框外。这里有一个例子。 如下例所示,您可以使用css outline属性,来设置不影响元素宽度和高度的边框。这样,边框宽度就不会被添加到元素的宽度中。
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
更多关于大纲的内容:这里
其他回答
也许这是一个迟来的答案,但我想分享我的发现。我发现了2种解决这个问题的新方法,这是我在答案中没有发现的:
内边框通过box-shadow css属性
是的,box-shadow用于为元素添加box-shadow。但你可以指定嵌入阴影,它看起来像一个内边框,而不是一个阴影。你只需要将水平和垂直阴影设置为0px,并将盒子阴影的“spread”属性设置为你想要的边界宽度。所以对于10px的“内”边框,你可以这样写:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
下面是一个jsFiddle示例,演示了盒影边框和“正常”边框之间的区别。这样你的边框和盒子宽度总共是100px,包括边框。
更多关于box-shadow的内容:这里
通过outline css属性设置边框
这是另一种方法,但这种方法的边界将在框外。这里有一个例子。 如下例所示,您可以使用css outline属性,来设置不影响元素宽度和高度的边框。这样,边框宽度就不会被添加到元素的宽度中。
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
更多关于大纲的内容:这里
如果你使用box-sizing: border-box不仅表示边框, 填充、保证金等。所有元素都将进入父元素 元素。
Div p { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:150 px; 高度:100%; 边框:20px实体#f00; background - color: # 00 f; 颜色:# fff; 填充:10 px; } < div > 它在20世纪60年代随着Letraset床单的发行而流行起来 < / div >
虽然这个问题已经通过使用box-shadow和outline属性的解决方案得到了充分的回答,但我想稍微扩展一下 对于所有那些降落在这里(像我自己)寻找一个解决方案的内边界偏移
假设你有一个100px x 100px的黑色div,你需要用白色边框来嵌入它——它的内偏移量为5px(比如说)——这仍然可以用上面的属性来完成。
不必
这里的技巧是知道允许多个盒子阴影,其中第一个阴影在顶部,随后的阴影具有较低的z顺序。
有了这些知识,盒影的声明将是:
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
div { 宽度:100 px; 身高:100 px; 背景:黑色; 盒影:插入0 0 0 5px黑色,插入0 0 0 10px白色; } < div > < / div >
基本上,这个声明说的是:首先渲染最后一个(10px白色)阴影,然后渲染上面的前5px黑色阴影。
用Outline -offset勾勒轮廓
为达到与上述相同的效果,概要声明如下:
outline: 5px solid white;
outline-offset: -10px;
div { 宽度:100 px; 身高:100 px; 背景:黑色; 轮廓:5px纯白色; outline-offset: -10 px; } < div > < / div >
注意:IE不支持outline-offset,如果这对你很重要的话。
Codepen演示
雅虎这真的是可能的。我找到了。
对于底部边界:
div {box-shadow: 0px -3px 0px red inset; }
Top Border:
div {box-shadow: 0px 3px 0px red inset; }
11年后,答案在这里:
只用提纲: 外形:0.2vw纯红色;
我希望我能帮助那些11年后也看到这个问题的人。