CSS：ボーダー。 要素の境界

要素の境界線を制御するには、汎用の border プロパティを使用します。 このプロパティを使用すると、要素の境界線の太さ、スタイル、色を 1 つの宣言で設定できます。

これら 3 つのプロパティ (境界線の太さ、境界線のスタイル、色) は 1 つの宣言で設定できます。 以下に例を示します。

要素の片側にのみ境界線スタイルを指定できます。 これを行うには、border-top (上の境界線)、border-right (右の境界線)、border-bottom (下の境界線)、border-left (左の境界線) のプロパティを使用します。

この例では、ブロックの各辺の境界線の太さ、スタイル、色が異なります。

方法を考えてください CSSヘルプ次のような形状を作成できます。

境界線の値（太さ、スタイル、色）は、特別なプロパティを使用して個別に設定できます。

• ボーダースタイル - ボーダースタイル。
• border-width - ボーダーの幅。
• border-color - 境界線の色。

それぞれの値を個別に考えてみましょう。

ボーダースタイルのプロパティ ボーダースタイル。

border-style プロパティは、境界線のスタイルを設定します。 CSS では、HTML とは異なり、要素の境界線を実線にすることはできません。 境界線スタイルには次の値が受け入れられます。

1. none - 境界線なし (デフォルト)。
2. 実線 - 実線の境界線。
3. 二重 - 二重境界線。
4. 破線 - 点線の境界線。
5. 点線 - 多数の点で構成される境界線。
6. リッジ - 「リッジ」の境界線。
7. 溝 - 「溝」の境界線。
8. 挿入図 - くぼんだ境界線。
9. 開始 - 押し出された境界線。

それらがどのようなものであるかの例。

境界線なし（なし）

実線の境界線

二重枠

一連の点の境界線 (点線)

破線の境界線

溝の境界線

尾根の境界線

インデントされた境界線 (差し込み)

押し出しボーダー(アウトセット)

ちなみに棟枠の枠線の色を黒にするとこうなります。

黒のボーダーとリッジスタイルの div ブロック。

フレームがしっかりしているように見えますが、それは黒の影効果を追加することによってリッジスタイルが作成されているためであり、黒のフレームには黒の効果は表示されません。

border-style プロパティを使用すると、ブロックのすべての辺だけでなく境界線のスタイルを設定することもできます。 1 つの境界線スタイル プロパティに複数の値を設定することができます。値の数に応じて、境界線スタイルはブロックの異なる数の辺に割り当てられます。 1 つ、2 つ、3 つ、または 4 つの値を設定できます。 それぞれのケースの例を見てみましょう。

1 つの値 (実線) - ブロックのすべての側面に境界線スタイルが設定されます。

2 つの値 (solid double) - 最初の値は上面と下面のスタイルを設定し、2 つ目は側面のスタイルを設定します。

3 つの値 (実線の二重点線) - 最初の値は上面、2 番目は側面、3 番目は底面です。

4 つの値 (実線、二点鎖線) - 上から時計回りに片側の各値。

border-width プロパティ。 境界線の太さ。

要素の境界線の幅を設定するには、border-width プロパティを使用します。 境界線の太さは、ピクセルなどの絶対測定単位で指定できます。

境界線スタイルのプロパティと同様に、このプロパティも 1 ～ 4 つの値に設定できます。 それぞれのケースの例を見てみましょう。

コード例:

また、border-width プロパティには次の形式の値があります。 キーワード。 全部で 3 つあります。

• 細い - 細​​い境界線。
• 中 - 平均的な厚さ。
• 太い - 太い境界線。

フチの太さ：薄い。

ボーダーの太さ：中程度。

枠線の太さ：太い。

境界線の色のプロパティ。 ボーダの色。

境界線の色を制御するには、境界線の色ツールを使用します。 このプロパティの色は、「CSS の色」の記事で説明されている任意の方法を使用して設定できます。つまり、次のとおりです。

• 色の16進数表記(#ff00aa)。
• RGB 形式は rgb(255,12,110) です。 RGBA形式 CSS3の場合。
• HSL形式 CSS3 の HSLA。
• 色の名前 (例: 黒)。 完全なリスト色の名前は CSS の色名テーブルに記載されています。

border-color プロパティも 1 ～ 4 つの値を持つことができ、それらは前のプロパティと同様に扱われます。

1 つの値 (赤)。

2値(赤黒)。

3つの値（赤、黒、黄）。

4つの値（赤、黒、黄、青）。

さて、上で述べた問題に戻って図を描いてみましょう。

以下は、そのような図を描画するコードですが、サイズが大きいだけです。

側面の値を個別に設定する

ブロックの片側のみに境界プロパティ値を指定できることは上で説明しました。 これらの目的のためのプロパティがあります。

• border-top (上の境界線)
• 境界線右
• ボーダーボトム
• border-left (左ボーダー)

すべてのプロパティで 3 つの値 (厚さ、スタイル、色) が任意の順序で指定されることを思い出してください。 ただし、各面の厚さ、色、スタイルを個別に設定できるプロパティがあります。 これらのプロパティの記述は上記から派生します。

上部の境界線オプション (border-top)。

• border-top-color - 要素の上の境界線の色を設定します。
• border-top-width - 要素の上端の太さを設定します。
• border-top-style - 要素の上端のスタイルを設定します。

右枠オプション (border-right)。

• border-right-color - 要素の右側の境界線の色を設定します。
• border-right-width - 要素の右側の境界線の太さを設定します。
• border-right-style - 要素の右側の境界線のスタイルを設定します。

下枠オプション (border-bottom)。

• border-bottom-color - 要素の下の境界線の色を設定します。
• border-bottom-width - 要素の下側の境界線の太さを設定します。
• border-bottom-style - 要素の下の境界線のスタイルを設定します。

左境界オプション (border-left)。

• border-left-color - 要素の左境界線の色を設定します。
• border-left-width - 要素の左境界線の太さを設定します。
• border-left-style - 要素の左境界線のスタイルを設定します。

これらのプロパティの使用例:

境界半径プロパティ。 境界線の角を丸くします。

border-radius プロパティは、要素の境界線の角を丸めることを目的としています。 このプロパティは CSS3 で登場し、すべての CSS3 で正しく機能します。 最新のブラウザを除きます。 インターネットエクスプローラ 8 (および古いバージョン)。

値には、CSS で使用される任意の数値を指定できます。

境界線の半径プロパティ: 15px。

ブロック フレームが指定されていない場合、フィレットは背景とともに発生します。 以下は、境界線がなく、背景色が付いている丸いブロックの例です。

境界線の半径プロパティ: 15px。

要素の個々の角を丸くするためのプロパティがあります。 この例では、それらすべてを使用します。

境界線の左上の半径: 15px; ボーダー右上半径: 0; ボーダー右下の半径: 15px; 境界左下の半径: 0;

境界線の半径プロパティ: 15px。

このコードは、 border-radius : 15px 0 15px 0 という 1 つの宣言で記述できます。 実際、border-radius プロパティは 1 から 4 の値に設定できます。 以下の表は、そのような発表を管理する規則の概要を示しています。

この表を注意深く検討すると、最も重要な点が理解できると思います。 短いメモ希望のスタイルは次のようになります: border-radius : 15px 0 。 意味は二つしかありません。

ちょっとした練習

CSSを使用してレモンを描画します。

そのようなブロックのコードは次のとおりです。

マージン: 0 自動; /* ブロックを中央に配置 */ width: 200px; 高さ: 200ピクセル; 背景: #F5F240; 境界線: 1 ピクセルの実線 #F0D900; 境界半径: 10px 150px 30px 150px;

すでに図を描いています。

ここから三角形を残してみましょう。

三角形のコードは次のとおりです。

マージン: 0 自動; /* ブロックを中央に配置します */padding: 0px; 幅: 0px; 高さ: 0; 境界線: 30 ピクセルの白一色。 ボーダーボトムカラー: 赤;

2016 年 6 月 16 日

皆さんこんにちは。 今日は、Web サイトをレイアウトするときに、CSS で透明な境界線、つまり要素の目に見えないフレームが作成される場合がある理由を説明します。

なぜ透明なフレームが必要なのでしょうか？

別のレイアウトをレイアウトするときに、次のタスクが設定されました。メニュー項目の上にマウスを移動すると、その項目に下線が表示されます。 テキストではなく、リンクを含むブロック全体が対象です。 レイアウトを理解している人にとっては、すべてが非常にシンプルかつ明確です。 この場合。 リンク上にマウスを移動するときに、border-bottom プロパティを追加するだけです。 しかし、そのままではあまり美しくも健康にもなりません。 次に例を示します。 このような htmlコード作成するために必要な シンプルなメニュー 4 ポイント差:

一般に、いくつかのスタイルが彼に処方されましたが、私はそれらすべてを与えるつもりはありません。 項目の上にマウスを置いたときの下線効果に興味があります。 これは次のように実装されます。

メニュー li a:hover( border-bottom: 5px ソリッドブラウン; )

すべては非常に単純ですが、次のことが起こります (任意の項目を指してください)。

同意します、それはあまり良くありません。 さらに、一部のコンテンツは下に配置され、ホバーするたびに 5 ピクセル下に移動します。 ご存知のとおり、フレームにより要素のサイズが増加します。

実際、この問題を解決するには、最初にリンクを同じフレームに 5 ピクセルの厚さで透明色に設定するだけです。 この場合、ホバリング時に枠の色のみが変化します。

メニュー li a( border-bottom: 5px ソリッド透明; )

私はプロパティを 1 つだけ指定しました。残りのスタイルには興味がありません。スタイルは自分で作成できます。 これで、ホバリング時にけいれんが発生しなくなり、これを確認できます。

なるほど、なぜ CSS に透明な境界線が必要なのかという質問に答えられたと思います。 おそらく他の用途があるかもしれません。 というか、不可能ではありますが、間違いなくあります。 これを使用して三角形を作成できます。 なんと、見てください。 これらは透明フレームを使用するためのオプションです。

CSS border プロパティは、オブジェクトの境界線、つまり境界線の太さ、色、スタイルを作成するために使用されます。 このプロパティは HTML で広く使用されています。 作成できます さまざまな効果ページ上のコンテンツをよりよく認識できるようにするためです。 たとえば、サイドバー、Web サイトのヘッダー、メニューなどをデザインします。

1. CSS ボーダー構文

国境 ： ボーダー幅 ボーダースタイル ボーダーカラー | 継承する;

• border-width - 境界線の太さ。 ピクセル（px）単位で設定することも、細、中、太の標準値を使用することもできます（ピクセル単位の幅のみが異なります）。
• border-style - 表示される境界線のスタイル。 次の値を取得できます
  • なしまたは非表示 - 境界線をキャンセルします
  • 点線 - 点線枠
  • 破線 - 破線で作られたフレーム
  • 実線 - 単純な線 (最も頻繁に使用される)
  • ダブル - ダブルフレーム
  • 溝 - 溝付き 3D 境界線
  • リッジ、インセット、アウトセット - さまざまな 3D フレーム効果
  • 継承 - 親要素の値が適用されます
• border-color - 境界線の色。 を使用して設定できます 特定の名前色とか RGB形式(サイトの HTML 色の名前を参照してください)

CSS border プロパティの値は任意の順序で設定できます。 最も一般的に使用されるシーケンスは「厚さスタイルの色」です。

2. 異なる CSS 境界線を使用した例

2.1. 例。 さまざまなボーダー デザイン スタイル ボーダー スタイル

境界線のスタイル: 破線

境界線のスタイル: 破線

ボーダースタイル: ソリッド

ボーダースタイル: ダブル

ボーダースタイル: グルーブ

ボーダースタイル: リッジ

境界線のスタイル: 差し込み

境界線スタイル:アウトセット

4 つの異なるフレーム

境界線のスタイル: 点線

境界線のスタイル: 破線

ボーダースタイル: ソリッド

ボーダースタイル: ダブル

ボーダースタイル: グルーブ

ボーダースタイル: リッジ

境界線のスタイル: 差し込み

境界線スタイル:アウトセット

4 つの異なるフレーム

2.2. 例。 マウスホバー時にフレームの色を変更する

この例は非常に単純ですが興味深いものです。 :hover 疑似クラスと CSS ボーダーを使用して作成する方法を示します。 単純な効果(たとえば、メニューの場合)。

ブロックの上にマウスを置くと枠の色が変わります

ページ上では次のようになります。

2.3. 例。 透明枠の作り方

フレームを透明にすることも可能です。 この効果はまれですが、Web デザイナーにとって非常に役立つ場合があります。 透明度を設定するには、RGBA (R、G、B、P) の形式でカラー設定を使用する必要があります。 最後のパラメータ透明度が設定されています ( 実数 0.0から1.0まで)

ページ上では次のようになります。

3. ボーダーの太さ: border-width プロパティ

線の太さを設定します。 以前は、border の単一の記述で指定していました。

CSS ボーダー幅の構文

境界線の幅: 薄い | 中 | 厚い | 意味;

• 細い - 細​​い線の太さ
• 中 - 平均的な線の太さ
• 太い - 太い線の太さ

以下にいくつかの例を示します。 最も珍しいのは、両側のボーダーの太さが異なることです。

ボーダー幅: 細い

ボーダー幅: 中

ボーダー幅: 太い

境界線の太さが異なる

ページ上では次のようになります。

ボーダー幅: 細い

ボーダー幅: 中

ボーダー幅: 太い

境界線の太さが異なる

4. 片方の端（ボーダー）のみにボーダー枠を作る方法

CSS border プロパティには、要素に片側の境界線を設定するための派生プロパティがあります。

• border-top - 上部に境界線を設定します (上部境界線)
• border-bottom - 下部に境界線を設定します (下境界線)
• border-right - 右側に境界線を設定します (右境界線)
• border-left - 左側に境界線を設定します (左境界線)

これらの境界は組み合わせることができます。 方向ごとに独自のフレームを作成します。 構文は border とまったく同じです。

物件もありますよ

• border-top-color - 上部の境界線の色を設定します
• border-top-style - 上枠のスタイルを設定します。
• border-top-width - 上部の境界線の太さを設定します
• 等 それぞれの方向に

私の意見では、スタイルで追加のテキストを作成するよりも、すべてを 1 行に記述する方が簡単です。 たとえば、次のプロパティは同じになります。

/* 2 つの同一のスタイルの説明: */

4.1. 例。 引用文を強調するための美しいフレーム

見積フレーム例

ページ上では次のようになります。

見積フレーム例

注記
それぞれの辺に個別の境界線を設定できます。

5. HTML要素に複数の枠線を追加する方法

場合によっては、複数の境界線を作成する必要があります。 例を挙げてみましょう

5.1. 複数の境界線を含む最初のオプション

ページ上では次のようになります。

シャドウイングには 2 つ目の方法があります。

5.2. 影を重ねて複数の境界線を作成する

ページ上では次のようになります。

6. 境界線の角を丸くする (border-radius)

作成用 美しいフレーム使用 CSSプロパティ border-radius (CSS3 でのみ使用可能)。 角に丸みを持たせることも可能で、全く違った印象になります。 例えば

7. CSS のインデントされた行

プレスされたラインは印象的に見えます 暗い背景, これはすべてのサイトに適しているわけではありません。

ページ上では次のようになります。

JavaScript から border にアクセスするには、次の構造を記述する必要があります。

document.getElementById("要素ID").style.border="VALUE"

CSS境界線要素は、要素のコンテンツとそのパディングを囲む 1 つ以上の行です。 境界線は、短縮表現の border プロパティを使用して指定されます。 フレーム スタイルは、次の 3 つのプロパティを使用して設定されます。 スタイル, 色そして 幅.

CSS プロパティを使用して HTML 要素のフレームと境界線を装飾する

1.ボーダースタイル

デフォルトでは、境界線は常に要素の背景の上に描画され、背景は要素の外縁まで延長されます。 フレーム スタイルによって表示が決まります。このプロパティがないと、フレームはまったく表示されません。 要素の場合、border-style プロパティを使用してすべての辺に同時に境界線を設定することも、border-top-style 修飾プロパティなどを使用して各辺に個別に境界線を設定することもできます。 継承されません。

構文

P (ボーダースタイル: ソリッド;) p (ボーダートップスタイル: ソリッド;)

2.フレームカラーボーダーカラー

このプロパティは、すべての面のフレームの色を同時に設定します。 明確化プロパティを使用すると、要素の各辺の境界線に異なる色を設定できます。 フレームに色が指定されていない場合は、要素のテキストの色と同じになります。 要素にテキストがない場合、境界線の色は親要素のテキストの色と同じになります。 継承されません。

構文

P (ボーダーカラー: #cacd58;)

3. 枠線の幅

フレーム幅は、長さの単位またはキーワードを使用して指定します。 border-style プロパティが none に設定され、要素の境界線がある程度の幅に設定されている場合、この場合、境界線の幅は 0 に設定されます。 継承されません。

構文

P (ボーダー幅: 2px;)

4. 1 つのプロパティでフレームを設定する

border プロパティを使用すると、たとえば、 border-width 、 border-style 、 border-color のプロパティを組み合わせることができます。

Div (幅: 100px; 高さ: 100px; 境界線: 2px ソリッドグレー; )

この場合、指定されたプロパティは要素のすべての境界線に同時に適用されます。 値が指定されていない場合は、デフォルト値が使用されます。

5. 要素の 1 つの境界線にフレームを設定する

要素の境界線に別のスタイルを設定する必要がある場合は、次のように使用できます。 短いメモ対応する境界の場合。
以下にリストされているプロパティは、 border-width 、 border-style 、および border-color のプロパティを 1 つの宣言に結合しています。 プロパティのリストは指定された順序で指定されますが、1 つまたは 2 つの値をスキップできます。その場合、それらの値はデフォルト値になります。

上の境界線のスタイルは、 border-top プロパティ、bottom - border-bottom 、left - border-left 、および right - border-right を使用して設定されます。

構文

P (ボーダートップ: 2px ソリッドグレー;)

6. 外形輪郭

このプロパティは、要素の周囲の外側の境界線 (つまり、通常の境界線の外側) を指定します。 このプロパティの主な目的は、要素を強調表示することです。 border プロパティとは異なり、このプロパティを適用しても要素のサイズや位置には影響しません。 アウトラインが要素ブロックの上に表示されるため、重複する可能性があります 余白要素とその隣接領域。

また、要素のフレームとは異なり、外側の輪郭は要素の四方を囲み、要素全体を囲みます。

外側の輪郭は常に長方形であり、border-radius が指定されているブロックの境界線に従いません。

アウトライン プロパティを使用すると、アウトライン プロパティ、アウトライン スタイル、アウトライン幅のプロパティを組み合わせることができます。 値が指定されていない場合は、デフォルト値が使用されます。

Div (幅: 100px; 高さ: 100px; アウトライン: #cacd58 ソリッド 2px; )

6.1. アウトラインスタイル

外側の輪郭線の外観は、要素のフレームのスタイルと同様に設定されます。 継承されません。

構文

P（外形：リッジ）

6.2. 外側の輪郭の色 輪郭の色

外側の輪郭の色は次の場合にのみ指定できます。 設定値アウトラインスタイル。 継承されません。

構文

P (輪郭スタイル: リッジ; 輪郭色: シルバー; )

6.3. 外側の輪郭の厚さ-輪郭の幅

外側の輪郭線の太さは、要素の枠の太さと同様に設定されます。 継承されません。

構文

P (アウトラインスタイル: 点線; アウトライン幅: 5px; )