如何在不增加元素整体宽度的情况下，使用css给任何元素加上边框？
如何在不增加元素整体宽度的情况下，使用css给任何元素加上边框？
提问于 2010-05-01 10:22:33
如何在不增加元素整体宽度的情况下，使用css给任何元素加上边框？
就像在Photoshop中一样，我们可以给出笔划-内部，中心和外部
我认为默认的css边框属性在photoshop中是中心状中心，对吗？
我想把边框放在盒子里面，而不是盒子外面。并且不想在框宽度中包含边框宽度。
回答 9
Stack Overflow用户
回答已采纳
发布于 2011-11-30 07:22:51
outline:1px solid white;这不会增加额外的宽度和高度。
Stack Overflow用户
发布于 2013-02-11 07:50:19
根据预期的浏览器支持，您可以使用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;我唯一不能说的是，这会给渲染性能带来多大的影响。我认为，如果屏幕上同时有数百个元素使用这种技术，这可能会成为一个问题。
Stack Overflow用户
发布于 2012-04-26 22:19:40
正如abenson所说，你可以使用outline，但是有一个问题是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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2748637
复制相关文章
相似问题