web-dev-qa-db-ja.com

要素の幅全体にborder-widthを追加せずにcssを使用して要素に境界線を付ける方法は？

要素の幅全体にborder-widthを追加せずにcssを使用して要素に境界線を付ける方法は？

Photoshopのように、ストロークを内側、中央、外側に与えることができます

デフォルトのCSS境界線プロパティはPhotoshopの中心のような中心だと思いますが、私は正しいですか？

ボックスの外側ではなく内側にボーダーを付けたい。ボックスの幅に境界線の幅を含めたくない。

csscss3
89
Jitendra Vyas
outline:1px solid white;

これは余分な幅と高さを追加しません。

205
abenson

CSSのボックスサイズを確認してください...

ボックスサイズのCSS3プロパティでこれを行うことができます。 border-boxの値（content-boxのデフォルトとは対照的に）は、最終的にレンダリングされたボックスを宣言された幅にし、ボックス内の境界とパディングを切り取ります。これで、ピクセルベースのパディングと境界線を含む100％幅の要素を安全に宣言でき、目標を完全に達成できます。

  • -webkit-box-sizing：境界ボックス;/* Safari/Chrome、その他のWebKit * /
  • -moz-box-sizing：境界ボックス;/* Firefox、その他のGecko * /
  • ボックスサイズ：ボーダーボックス;/* Opera/IE 8+ * /

これを処理するためにmixinを作成することをお勧めします。ボックスサイズの詳細については、W3cをご覧ください http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

27
Chad

目的のブラウザサポートに応じて、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;

私が言うことができない唯一のことは、これがレンダリングパフォーマンスを賢くすることの違いです。一度に画面上でこの手法を使用する数百の要素があると、問題になる可能性があると思います。

21
James Bryant

私は同じ問題に遭遇しました。

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

この回答により、1つのサイドを指定できます。 IE8 +で動作します-box-shadowの使用とは異なります。

もちろん、特定の側面を選択する必要があるため、擬似要素のプロパティを変更します。

*新規および改善*

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

これにより、境界線を使用して、ボックスの複数の側面にヒットすることができます。

15
mikevoermans

Abensonが言ったように、 outline を使用できますが、1つの落とし穴は、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>
6
ChrisD

つかいます box-sizing: border-box divの幅を変更せずに、divを作成するために[〜＃〜] inside [〜＃〜]div.

outlineを使用して、div幅を変更せずにdivの境界線[〜＃〜] outside [〜＃〜]を作成します。

例： 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>
5
GibboK

境界線がない場合は、パディングを使用します。境界線がある場合、パディングを削除します。

.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サイズは同じままです。

3
Jake Wilson

あなたの場合は、パディングから境界線の半分を差し引くことでそれをごまかすことができますか？ （境界線の幅が5ピクセルの場合、パディングから-2.5、負のパディングを持たせてボックスの全体幅を小さくすることはできません）。余白に2.5pxを追加して、ボックス全体を同じサイズに保つことができます。

私はこの提案は本当に好きではありませんが、これをきれいに処理する方法はないと思います。

2
vfilby

したがって、よく知られている IEボックスモデルのバグ ？と同じことを達成しようとしています。それは可能ではありません。または、IE Windowsのみでクライアントをサポートし、 doctype を選択して、IE into quirksmode 。

1
BalusC

別のオプション、背景色が単色の場合：

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
}
0
Jake Wilson

アウトライン：3pxソリッドブラック||ボーダー：3pxソリッドブラック

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>
0
Matan Shushan