要素の境界を追加するための3つのCSSメソッド

This is episode #23 in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

CSSに関しては、時々border 本当にではないborder .
このエピソードでは、

border

outline

box-shadow

また、使用するときに議論します.

CSSボックスモデルの再発行

我々の3つの境界メソッドの重要な違いは、彼らが要素に置かれて、彼らがその寸法にどのように影響するかです.この動作はCSSボックスモデルによって制御されます.

the border 正確に、そのパディングとマージンの間に座って、要素の境界です、そして、幅は計算された要素局面に影響を及ぼします

the outline の隣にborder , 重複box-shadow and margin , しかし、要素の次元に影響を与えない

デフォルトではbox-shadow 定義された方向(s)のスペースの量をカバーしている境界の端から外へ広げてください、そして、それも要素の局面に影響を及ぼしません

ボーダー構文と使用

ボーダーズは、ウェブの始めからデザインの標準でした.
我々がカバーするつもりである他の2つの方法と比較して重要な違いは、デフォルトの境界で要素の計算された次元に含まれていることです.たとえ設定してもbox-sizing: border-box 境界線はまだ計算に図形.
ボーダーの最も重要な構文は、幅とスタイルを定義します.

border: 3px solid;

定義されていない場合、デフォルトの色はcurrentColor これは、color カスケードで.
しかし、より多くのスタイルが境界線で利用できます、そしてborder-style あなたが望むならば、あなたは各々の側のために異なるスタイルを定めることができます.

Visit MDN docs to review all available border-style values and see examples.

境界線使用

境界線は、スタイルが要素の寸法で計算されることが許容されるときのための堅実な選択です.そして、デフォルトのスタイルは、多くのデザイン柔軟性を与えます.

Keep reading for a bonus tip about something only border can do!

概要構文と使用法

アウトラインについては、デフォルトではnone :

outline: solid;

ボーダーのように、それはcurrentColor デフォルトの幅はmedium .
の典型的なアプリケーションoutline ネイティブブラウザスタイル:focus リンクやボタンのようなインタラクティブな要素です.
あなたがカスタムを提供することができない限り、この特定のアプリケーションはアクセシビリティの目的のために起こるのを許されなければなりません:focus に合うスタイルWCAG Success Criterion 2.4.7 Focus Visible .
設計目的では、よくある問題outline それはどんな曲線からもその曲線を受け継ぐことができないということですborder-radius スタイル.

使用時

利用outline 要素の寸法に影響を与えたくない場合には望ましいかもしれませんborder-radius. それが起こるthe same style values as border だから、同様の外観を達成することができます.

ボックスシャドウの構文と使い方

必要最小限のプロパティbox shadow はx and y 軸と色

box-shadow: 5px 8px black;

必要に応じて、作成する3番目のユニットを追加しますblur , そして追加する4番目spread .

Check out my 4.5 minute video demo on egghead to learn more about the expanded syntax as well as tips on using box-shadow.

ボーダーを作成するために使用するにはx and y 軸値と同様にblur to 0 . 次に、正の数を設定しますspread :

box-shadow: 0 0 0 3px blue;

これは、要素の周りの境界の外観を作成し、さらに適用することができますborder-radius :

ときにボックスの影を使用する

好む方box-shadow 特にレイアウトのシフトを引き起こすことなく境界をアニメーション化するとき.次のセクションでは、このコンテキストの例を示します.
以降box-shadow することができます階層化することができます、それはあなたのレイアウトを強化するために知るためにすべての周り良いツールです.
しかし、それは完全にいくつかのスタイルによって提供される模倣することができなくなりますborder and outline .

すべてをまとめる

ここでは、いくつかの実用的なシナリオではborder 代替案

ボタン境界

本物の場合border 問題になるのは、両方のボーダーと非ボーダーボタンのスタイルを提供するときに、それらのシナリオはお互いに隣に並んでいる.

典型的な解決策は、通常、border-width .
我々の新しい知識を持つ別の解決策はbox-shadow とともにinset ボタンの中に擬似的な境界線を視覚的に配置するキーワード

あなたのパディングがより大きいということに注意してくださいborder-width テキストコンテンツの重複を防ぐために.
あるいは、おそらくあなたは境界線を追加します:hover or :focus . リアルを使うborder , あなたはレイアウトシフトからの望ましくない視覚的なジャンプをborder これらの状態の寸法を簡単に増加させる.

この場合、我々は使用できるbox-shadow 真の次元が増加しないように擬似境界を作成するにはtransition :

以下に例を示します.

button {
  transition: box-shadow 180ms ease-in;
}

button:hover {
  box-shadow: 0 0 0 3px tomato;
}

CSSのデバッグ方法のアップグレード

古典的なCSS冗談は、特にオーバーフロースクロールまたは位置決めのためにCSS問題を理解することであることを付け加えます:

* { border: 1px solid red }

これはすべての要素に赤い境界線を追加します.
しかし、我々が学んだように、これはまた彼らの計算された局面に影響します.そして、潜在的に偶然あなたにさらなる問題を引き起こします.
代わりに

* { outline: 1px solid red; }

Pop quiz: where will the outline be placed, and why is this a better solution?

使用の1つの潜在的結果border コンテンツが再描画されると、スクロールバーが追加されます.この副作用はoutline .
その上、あなたは使用しそうですborder すでに要素があるので、一般的にborder は、おそらく新しい問題を導入する可能性のあるレイアウトのシフトを引き起こします.

Side note: Browser DevTools also have evolved more sophisticated methods of helping you identify elements, with Firefox even adding both a "scroll" and "overflow" tag that is helpful in the case of debugging for overflow. I encourage you to spend some time learning more about DevTool features!

可視フォーカスの確保

アクセシビリティのために、あなたが気づいていないかもしれない1つのシナリオは、Windowsハイコントラストモード(WHCM)のユーザーです.
このモードでは、あなたの提供される色は、減少したハイコントラストパレットに離れて剥ぎ取られます.すべてのCSSプロパティがbox-shadow .
つの実用的なインパクトはoutline upon :focus に置き換え、box-shadow , WHCMのユーザーは、もはや目に見えるフォーカスを与えられません.
このネガティブな影響を取り除くにはtransparent 概要:focus :

button:focus {
  outline: 2px solid transparent;
}

For a bit more context on this specific issue, review the episode on button styling.

輪郭とボックスシャドウの落とし穴

だってoutline and box-shadow ボックスモデルの境界線の外側に座ります、あなたが遭遇するかもしれない1つの結果は、それらがviewportの端の下で消えることです.だから、追加する必要がありますmargin 要素またはpadding にbody あなたがそれが見えるままでいるならば、対策として.
彼らの配置はまた、それらのようなプロパティによって剪断されることができることを意味しますoverflow: hidden またはclip-path .

ボーナス先端：勾配境界

約束通り、我々が議論した方法のborder できます.
しばしば忘れられた境界関連のプロパティはborder-image . The syntax can be a bit strange ときに実際の画像を使用しようとします.
しかし、それは隠された力を持っています-また、CSSグラデーションが技術的にイメージであるので、グラデーション境界をつくることができます:

これは通常の境界線幅とスタイルを定義する必要がありますsolid を返します.border-image 1つの加算でグラデーション構文を使用できるプロパティ.勾配の後の数はslice 私たちのグラデーションのための値は、単に1 基本的にグラデーションのサイズ変更/歪みを変更しません.

div {
  border: 10px solid;
  /* simplified from preview image */
  border-image: linear-gradient(to right, purple, pink) 1;
}

つの側だけに境界を置くために、もう一方の側面を最初にゼロに設定してください.

div {
  border-style: solid;
  border-width: 0;
  border-left-width: 3px;
  /* border-image */
}

欠点は、これらの国境が尊重しないことですborder-radius , それで、あなたがそうする解決が必要であるならば、あなたは勾配がModernCSS のホームページ😉