style="border.1px solid black"と書けばいいのはわかっています。1px solid black"
と書けばいいのはわかっていますが、これだとdivの両側に2pxが追加されてしまい、私が望むものではありません。
むしろ、このボーダーがdivの端から-1pxになるようにしたいのです。div自体は100px x 100pxで、もしボーダーを追加すると、ボーダーを表示させるためにいくつかの数学をしなければなりません。
ボーダーを表示させても、ボックスの大きさが100px(ボーダーを含む)になるようにする方法はありますか?
box-sizingプロパティを
border-box` に設定します。
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;
}
div + div {
border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>
IE8 & 以上]1で動作します。
このようにbox-shadowを使うこともできます。
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
ここでの例:
(hover to view border)これはモダンブラウザでのみ動作します。例えば、以下のようになります。IE 8には対応していません。 詳しくは、caniuse.com(box-shadow機能)をご覧ください。