CSS 境界線

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

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

CSS 枠線

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

要素の內(nèi)側(cè)のマージンは要素の境界線です。要素の境界線は、要素のコンテンツと內(nèi)側(cè)の境界線を囲む 1 つ以上の線です。

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

境界線と背景

CSS 仕様では、境界線は「要素の背景の上に」描畫(huà)されると規(guī)定されています。一部の境界線 (點(diǎn)線または破線の境界線など) が「中斷」されており、要素の背景が境界線の表示部分の間に表示される必要があるため、これは重要です。

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

境界線のスタイル

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

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

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

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

border-style Value:

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

dotted: dotted: 點(diǎn)線の枠を定義します

dashed: 點(diǎn)線の枠を定義します

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

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

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

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

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

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

複數(shù)のスタイルを定義します

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

ここでも、値が右上-下-左の順序を採(cǎi)用していることがわかります。また、複數(shù)の値で異なるパディングを設(shè)定する方法を議論するときにもこの順序が見(jiàn)られました。

片面スタイルを定義する

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

border-top -style

border-right-style

border-bottom-style

border-left-style

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

注: 2 番目の方法を使用する場(chǎng)合は、省略屬性の後に片面屬性を置く必要があります。これは、border-style の前に片面屬性を置くと、短縮屬性の値が片面?zhèn)?none を上書(shū)きするためです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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