如何在不使用border-width的整个元素宽度的情况下使用CSS为任何元素赋予边框？
像在Photoshop中一样，我们可以给笔画-内部，中心和外部
我认为默认的CSS边框属性是中心，如photoshop中的中心，对吗？
我想在框内而不是外面给边框。并且不想在框宽中包含边框宽度。
如何在不使用border-width的整个元素宽度的情况下使用CSS为任何元素赋予边框？
像在Photoshop中一样，我们可以给笔画-内部，中心和外部
我认为默认的CSS边框属性是中心，如photoshop中的中心，对吗？
我想在框内而不是外面给边框。并且不想在框宽中包含边框宽度。
Answers:
outline:1px solid white;这不会增加额外的宽度和高度。
查看CSS框大小...
大小可调的CSS3属性可以做到这一点。border-box的值（与content-box的默认值相对）使最终渲染的框成为声明的宽度，并在框内剪切任何边框和填充。现在，您可以安全地声明元素的宽度为100％（包括基于像素的填充和边框），并完美实现目标。
我建议创建一个mixin来为您处理。您可以在W3c上找到有关尺寸调整的更多信息，网址为http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
box-sizing就足够了。
您可以使用该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 +中工作-与使用盒子阴影不同。
当然，您需要根据具体情况来更改伪元素的属性。
*新增和改进*
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}这样就可以使用边框并击中盒子的多个侧面。
使用box-sizing: border-box以创建一个边界INSIDE一个div，而无需修改DIV宽度。
用于outline在div 外部创建边框而无需修改div宽度。
这是一个例子：https : //jsfiddle.net/4000cae9/1/
注意：
border-boxIE目前不支持
支持：
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>正如阿本森说的那样，您可以使用轮廓，但要注意的是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>因此，您正在尝试实现与众所周知的IE盒模型错误相同的功能？那不可能 或者，您只想在Windows上使用IE支持客户端，然后选择一个文档类型以强制IE进入quirksmode。
如果您的背景色是纯色，则另一种选择：
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
}#FFF透明，然后就不必记住更改两个值。您的建议的好处是，如果您需要虚线边框，则box-shadow在这方面缺乏的情况下可以使用。