回答:
outline:1px solid white;これは余分な幅と高さを追加しません。
CSSのボックスサイズを確認してください...
box-sizing CSS3プロパティはこれを行うことができます。（content-boxのデフォルトとは対照的に）border-boxの値により、最終的にレンダリングされたボックスが宣言された幅になり、ボックス内のボーダーとパディングがカットされます。これで、ピクセルベースのパディングとボーダーを含め、要素を100％の幅であると安全に宣言でき、目標を完全に達成できます。
これを処理するミックスインを作成することをお勧めします。ボックスサイズの詳細については、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ボックスシャドウを使用する大きな利点の1つは、複数のボックスシャドウを使用することで創造性を発揮できることです。
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;
}この回答では、片側を1つ指定できます。ボックスシャドウを使用するのとは異なり、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を。
div幅を変更せずにdivの外側にoutline境界線を作成するために使用します。
ここに例：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>アベンソンが言ったように、あなたは輪郭を使うことができますが、一つの落とし穴はOperaが「非長方形の形」を描くかもしれないということです。機能しているように見える別のオプションは、次のcssなどの負のマージンを使用することです。
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}このhtmlで：
<body>
<div>A block</div>
<div>Another block</div>
</body>もう1つのあまりクリーンでないオプションは、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>別のオプション、背景色が無地の場合：
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透明に置き換えることができ、2つの値を変更することを覚えておく必要はありません。あなたの提案は、もしあなたが破線のボーダーを必要とするならbox-shadow、これがこの点で欠けているように機能するという利点があります。