CSS境界線

CSS 境界線

要素の境界線は、要素のコンテンツとパディングを囲む 1 つ以上の線です。

CSS border プロパティを使用すると、要素の境界線のスタイル、幅、色を指定できます。

CSS 枠線

HTML では、テーブルを使用してテキストの周囲に枠線を作成しますが、CSS の枠線プロパティを使用すると、あらゆる要素に適用できる見事な枠線を作成できます。

要素の内側のマージンは要素の境界線です。要素の境界線は、要素のコンテンツと内側の境界線を囲む 1 つ以上の線です。

各境界線には、幅、スタイル、色という 3 つの側面があります。次のページでは、これら 3 つの側面について詳しく説明します。

境界線と背景

CSS 仕様では、境界線は「要素の背景の上に」描画されると規定されています。一部の境界線 (点線または破線の境界線など) が「中断」されており、要素の背景が境界線の表示部分の間に表示される必要があるため、これは重要です。

CSS2 では、背景は境界線ではなくパディングまでのみ拡張されると規定されています。その後、CSS2.1 で修正が加えられました。要素の背景は、コンテンツ、パディング、境界領域の背景になります。ほとんどのブラウザは CSS2.1 定義に従っていますが、一部の古いブラウザでは動作が異なる場合があります。

境界線のスタイル

スタイルは境界線の最も重要な側面です。スタイルが境界線の表示を制御するからではありません (もちろん、スタイルが境界線の表示を制御します)。スタイルがなければ、境界線が存在しないためです。全て 。

CSS の border-style プロパティは、10 種類の非継承スタイルを定義しています (なしも含みます)。

たとえば、画像の境界線を outset として定義して、「浮き上がったボタン」のように見せることができます:

a:link img {border-style: outset;}

border-style Value:

none: デフォルトの境界線なし

dotted: dotted: 点線の枠を定義します

dashed: 点線の枠を定義します

solid: 実線の境界線を定義します

double: 2 つの境界線を定義します。 2 つの境界線の幅と border-width の値は同じです

groove: 3D 溝の境界を定義します。効果は境界線の色の値によって異なります

ridge: 3D リッジ境界線を定義します。効果は境界線の色の値によって異なります

inset: 3D 埋め込み境界線を定義します。効果は境界線の色の値によって異なります

outset: 3D で強調表示された境界線を定義します。 効果は境界線の色の値によって異なります

複数のスタイルを定義します

境界線に複数のスタイルを定義できます。たとえば、次のようになります。このルールは、クラス名を除いて、段落に 4 つの境界線スタイルを定義します。実線の上境界線、点線の右境界線、点線の下境界線、および二重の左境界線です。

ここでも、値が右上-下-左の順序を採用していることがわかります。また、複数の値で異なるパディングを設定する方法を議論するときにもこの順序が見られました。

片面スタイルを定義する

要素ボックスの 4 辺すべてに境界線スタイルを設定するのではなく、片面に境界線スタイルを設定したい場合は、次の片面境界線スタイル属性を使用できます。

border-top -style

border-right-style

border-bottom-style

border-left-style

したがって、これら 2 つのメソッドは同等です。 }

注: 2 番目の方法を使用する場合は、省略属性の後に片面属性を置く必要があります。これは、border-style の前に片面属性を置くと、短縮属性の値が片面値 none を上書きするためです。

Border - 短縮属性 上の例では、多くの属性を使用して境界線を設定しています。

T プロパティで境界線を設定することもできます。 set "border"属性に設定できます。 1 つのステートメントで 4 つの側面のプロパティを指定します。 YBorder-Style は、要素内のすべての境界線のスタイルを設定するか、各辺の境界線スタイルを設定するために使用されます。 IBorder-width 省略属性は、要素のすべての境界線の幅を設定するか、各境界線の幅を設定するために使用されます。 OBorder-colorの略称属性は、要素の全ての枠線の部分の色を設定したり、四辺個別に色を設定したりすることができます。 OBorder-Bottom の省略属性は、下位フレームのすべての属性をステートメントに設定するために使用されます。

border-bottom-color 要素の下枠の色を設定します。

border-bottom-style 要素の下枠のスタイルを設定します。

border-bottom-width 要素の下枠の幅を設定します。 FBorder-left 省略属性は、左フレームのすべての属性をステートメントに設定するために使用されます。

border-left-color 要素の左枠の色を設定します。

border-left-style 要素の左境界線のスタイルを設定します。

border-left-width 要素の左ボーダーの幅を設定します。

border-right 右側のボーダーのすべての属性を 1 つのステートメントに設定するために使用される短縮属性。

border-right-color 要素の右枠の色を設定します。

border-right-style 要素の右枠のスタイルを設定します。

border-right-width 要素の右枠の幅を設定します。

border-top 短縮属性。上部の境界線のすべての属性を 1 つのステートメントに設定するために使用されます。

border-top-color 要素の上端の境界線の色を設定します。

border-top-style 要素の上端の境界線のスタイルを設定します。

border-top-width 要素の上端の境界線の幅を設定します。