Question

如何使用css为任何元素赋予边框而不将border-width添加到元素的整个宽度？

就像在Photoshop中一样，我们可以提供笔触 - 内部，中间和外部

我认为默认的css边框属性在photoshop中居中心，我是对的吗？

我想在盒子内部而不是在外面。并且不希望在框宽中包含边框宽度。

Answer 1

outline:1px solid white;

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

Answer 2

查看CSS box-sizing ...

box-sizing CSS3属性可以执行此操作。 border-box值（与内容框默认值相对）使最终呈现的框具有声明的宽度，并在框内部切割任何边框和填充。您现在可以安全地声明您的元素宽度为100％，包括基于像素的填充和边框，并完美地实现您的目标。

-webkit-box-sizing：border-box; / * Safari / Chrome，其他WebKit * /
-moz-box-sizing：border-box; / * Firefox，其他Gecko * /
box-sizing：border-box; / * Opera / IE 8+ * /

我建议创建一个mixin来为你处理这个问题。您可以在W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

找到有关盒子大小调整的更多信息

Answer 3

根据您的预期浏览器支持，您可以使用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;

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

Answer 4

我遇到了同样的问题。

.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;
}

这允许使用边框并击中框的多个边。

Answer 5

正如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>

Answer 6

使用box-sizing: border-box创建边框 INSIDE div而不修改div宽度。

使用outline创建边框 OUTSIDE div而不修改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>

Answer 7

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

.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大小保持不变。

Answer 8

在你的情况下你可以通过从填充减去一半的边界来捏造它吗？（如果您的边框宽度为5px，则填充为-2.5，您不能使用负填充，因此要小一些，以减小框的整体宽度）。您可以在边距上添加额外的2.5px，以使整个框保持相同的大小。

我真的不喜欢这个建议，但我认为没有办法干净利落地处理这个问题。

Answer 9

因此，你试图达到与众所周知的IE box model bug相同的效果？那是不可能的。或者您希望仅在Windows上支持使用IE的客户端，并选择doctype强制IE进入quirksmode。

Answer 10

另一种选择，如果您的背景颜色是实心的：

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
}

Answer 11

大纲：3px纯黑||边框：3px纯黑色

＆＃13;

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}

＆＃13;

<div>
hello world
</div>

＆＃13;

如何使用css为任何元素赋予边框而不向元素的整个宽度添加border-width？

11 个答案: