如何使用 css 给任何元素赋予边框，而不给元素的整个宽度增加边框宽度？

小开

因此，你正在努力实现与众所周知的模型错误相同的目标？这不可能。或者你想支持客户端的 IE 只在 Windows 上，并选择一个文件类型，强制 IE 到离奇莫德。

小开

在你的情况下，你可以通过减去一半的边界填充它？(- 2.5从填充如果你的边框是5像素宽，你不能有负填充，所以去小减少整个框的宽度)。您可以添加一个额外的2.5像素的边距，以保持整个框相同的大小。

我真的不喜欢这个建议，但我不认为有一个办法可以处理得干净利落。

小开

最佳答案

outline:1px solid white;

这不会增加额外的宽度和高度。

小开

正如 abenson 所说，你可以使用大纲，但有一个问题是 Opera 可能会画一个“非矩形的形状”。另一个似乎可行的方法是使用负边距，比如这个 css:

div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;


}

用这个 html:

<body>
<div>A block</div>
<div>Another block</div>
</body>

另一个不太干净的选项是向 html 添加额外的标记。例如，可以设置外部元素的宽度，并将边框添加到内部元素。CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

还有 html:

<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>

小开

根据预期的浏览器支持，可以使用 box-shadow属性。

您可以将模糊值设置为0，并将扩展设置为您想要的任何厚度。盒子阴影最棒的地方在于，您可以控制它是在外面(默认情况下)绘制还是在内部(使用 inset属性)绘制。

例如:

box-shadow: 0 0 0 1px black; // Outside black border 1px

或者

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

使用方块阴影的一个很大的优势是你可以通过使用多个方块阴影来获得创造性:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

我唯一不能说的是，这将使呈现的性能变得明智。我认为，如果同时在屏幕上使用这种技术的元素有数百个，那么这可能会成为一个问题。

小开

我也遇到了同样的问题。

.right-border {
position: relative;
}


.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}

这个答案允许你指定一个单边，并且可以在 IE8 + 中工作——不像使用 box-shadow。

当然，您可以根据需要单独选择一个特定的方面来更改伪元素属性。

* 全新升级 *

&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

这允许使用边框和击中多边框的能力。

小开

没有边框时使用填充。有边框时删除填充。

.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}


.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}

实际上，只需要用2px 边框替换2px 填充，Div 大小保持不变。

小开

另一种选择，如果你的背景颜色是纯色的:

body { background-color: #FFF; }


.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}


.myDiv:hover {
border-color: blue;  // Just change the border color
}

小开

看看 CSS 盒子大小..。

方块大小的 CSS3属性可以做到这一点。边框值(与内容框默认值相反)使最终呈现的框具有声明的宽度，以及框内的任何边框和填充。您现在可以安全地声明您的元素为100% 宽度，包括基于像素的填充和边框，并完美地实现您的目标。

- WebKit-box-size: orders-box;/* Safari/Chrome，other WebKit */
- moz-box-size: orders-box;/* Firefox，other Gecko */
Box-size: orders-box;/* Opera/IE8 + */

我建议创建一个混合函数来处理这个问题。你可以在 W3chttp://www.w3schools.com/cssref/css3_pr_box-sizing.asp找到更多关于盒子大小的信息

小开

使用 box-sizing: border-box可以在不修改 div 宽度的情况下创建边框 在里面和 div。

使用 outline创建边框 在外面 a div 而不修改 div 宽度。

举个例子: Https://jsfiddle.net/4000cae9/1/

备注: 目前 IE 还不支持 border-box

支援:

Http://caniuse.com/#feat=outline

Http://caniuse.com/#search=border-box

#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}




<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

小开

轮廓: 3px 纯黑 | | 边框: 3px 纯黑

div{
height:50px;
width:150px;
text-align:center;


}


div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>

小开

通常情况下，布局变化是问题所在。

如果你不需要 border-radius，那么 outline: 1px solid black;工作。

如果你这样做，使边框透明，并改变它的颜色时，它应该显示:

/* RELEVANT */
.my-div {
border-radius: 8px;
border: 2px solid transparent;
}


.my-div:hover {
border: 2px solid #ffffffa8;
}






/* NOT RELEVANT */
.pretty {
color: white;
padding: 10px 20px;
background: #0077b6;
font-size: 16px;
transition: border .15s ease-out;
cursor:pointer;
}

<button class="pretty my-div">
Button
</button>