如何给边界使用CSS的任何元素，而不添加边框宽度的元素的整个宽度？
如何给边界使用CSS的任何元素，而不添加边框宽度的元素的整个宽度？
像在Photoshop中，我们可以给中风 – 内部，中心和外部
我认为默认的CSS边框属性是中心在Photoshop中，我是对的？
我想给框内的边界不在外面。 并且不希望在框宽中包含边框宽度。
outline:1px solid white; 这不会增加额外的宽度和高度。
查看CSS盒大小…
盒子大小的CSS3属性可以做到这一点。 边框值（与内容框默认值相反）使最终的渲染框为已声明的宽度，并在框内切割任何边框和填充。 您现在可以安全地声明您的元素为100％宽度，包括基于像素的填充和边框，并完美实现您的目标。
- -webkit-box-sizing：border-box; / * Safari / Chrome，其他WebKit * /
- -moz-box-sizing：border-box; / * Firefox，其他Gecko * /
- 盒子尺寸：边框; / * Opera / IE 8+ * /
我build议创build一个混合来处理这个给你。 你可以在W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.aspfind更多关于盒子大小的信息。;
根据您想要的浏览器支持，您可以使用box-shadow属性。
您可以将模糊值设置为0，并将其展现为您之后的厚度。 关于box shadow的好处是你可以控制是否在外面（默认）或内部（使用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; }
这使得能够使用边框和命中一个盒子的多边。
正如阿本森所说，你可以使用一个大纲，但是一个问题是，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-sizing: border-box来创build一个边框而不修改div的宽度。
使用outline来创build一个边框，而不用修改div的宽度。
这里是一个例子： https : //jsfiddle.net/4000cae9/1/
注意：目前border-box不支持IE
支持：
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>
在你的情况下，你可以通过从填充减去边界的一半来搞定它吗？ （如果你的边框的宽度是5px，则填充值为-2.5，所以你不能有负填充，这样可以减小框的整体宽度）。 您可以添加一个额外的2.5px的边距，以保持整体框相同的大小。
我真的不喜欢这个build议，但我不认为有这样一个办法干净地处理这个问题。
没有边框时使用填充。 有边框时删除填充。
.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边框replace2px填充。 Div的大小保持不变。
因此，你正在试图达到像众所周知的IE框模型错误 ？ 这是不可能的。 或者您只想在Windows上使用IE来支持客户端，并select强制IE进入quirksmode的文档types。
另一种select，如果你的背景色是坚实的：
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 }
大纲：3px纯黑|| 边框：3px纯黑色
div{ height:50px; width:150px; text-align:center; } div{ /*this is what you need ! */ outline:1px solid black }
<div> hello world </div>
