ホームページ > 記事 > ウェブフロントエンド > CSS Webページの境界線コード

CSS Webページの境界線コード

php中世界最好的语言オリジナル: 2017-11-22 10:45:5714263ブラウズ

CSS Web ページの境界線は主に境界線を使用して作成されるため、今日は CSS 境界線に関する知識に慣れていきます。皆さんのお役に立てれば幸いです

CSSボーダーは、オブジェクトのボーダーの幅、色、破線、実線、その他のスタイルCSSプロパティを制御するCSSボーダーです。同時に、CSS マニュアルを入力して、境界線マニュアルを表示することができます

DIV+CSS 境界線の知識チュートリアル

Html の元の境界線と DIV+CSS 境界線の比較

Html テーブルコントロール境界線:

border= 1" bordercolor="# 000000"

説明: 表の境界線の幅を 1px、CSS カラーを黒に制御します。デフォルトは実線スタイルの境界線です。

border 境界線の構文

4 つの境界線

border-left は、左側の境界線のスタイルを個別に設定する場合に、

border-right を使用して、右側の境界線のスタイルを個別に設定する場合に使用します。、上部の境界線を設定するには

border-top を使用し、下部の境界線スタイルを個別に設定するには

border-bottom を使用します。 CSSの下線効果として適用されます。

4 辺すべてに同じ境界線を持つボーダーの略称

#div{border:1px Solid #00F}

div オブジェクトボックスに 1px ピクセルの青い実線の境界線を設定します

3. 通常は 3 つの境界線スタイルを使用できます。境界線の幅 (太さ)、境界線のスタイル、および境界線の色の設定は、3 つの属性とパラメーターです。

1)、境界線の色:

border-color

:#0002)、境界線の太さ (幅):

border-width

:1px数値 + 単位を使用して境界線の太さの幅を設定します (1px など)。 (境界線の太さの幅は 1 ピクセル)、境界線は正の数、つまり 0 より大きい値である必要があります。それ以外の場合、境界線スタイルの設定は無効になります。

3)、ボーダーボーダースタイル:

ボーダースタイル

: ソリッドボーダースタイルの値は次のとおりです:

none: ボーダーなし。指定されたボーダー幅の値には依存しません

hidden: ボーダーを非表示にします。 IE は

点線をサポートしていません: MAC プラットフォームの IE4+、WINDOWS および UNIX プラットフォームの IE5.5+ は点線です。それ以外の場合は、実線 (一般的に使用されます)

破線: MAC プラットフォームの IE4+、WINDOWS および UNIX プラットフォームの IE5.5+ は点線です。それ以外の場合は、実線 (よく使用されます)

solid: 実線の境界線 (よく使用されます)

double: 二重境界線。 2 本の単線とその間隔の合計は、指定された border-width の値に等しくなります

groove: border-color の値に基づいて 3D 溝を描画します

ridge: border-color の値に基づいてひし形の境界線を描画します

inset:border-colorの値に基づいてひし形の境界線を描画します

outset:border-colorの値に基づいて3D凸面のエッジを描画します

CSSは左境界線、右境界線、上境界線を設定します、下枠を個別に書きます

CSSスタイルの設定方法

1pxの黒点線の上枠を個別に記述します

2.黒の実線下枠

border-bottom:1px 実線 #000

3. 1px 黒点線左枠

border-left:1px 破線 #000

4、1px 黒実線右枠

: 1px ソリッド #000

一般的に推奨されるボーダースタイル

通常、主流のブラウザーと互換性のあるボーダースタイルを使用します: ：

Solid Border: ソリッド

Border:1px Solid #000 オブジェクトの 1px (ピクセル) の太さの黒のソリッドボーダーを設定します。

破線: 破線

Border:1px 破線 #000 オブジェクトの 1px (ピクセル) の太さの黒い点線の境界線を設定します。

CSS枠線の使用

オブジェクトの枠線スタイルを設定し、上枠、下枠、左枠、右枠のスタイルを個別に設定して、美化と美しさを実現します。境界線はセグメント化とレイアウト計画の役割を果たします。

枠線スタイルの最適化の簡略化されたグラフィックチュートリアル

CSS 枠線アプリケーションのケースコード

説明: ケース効果を観察するために、CSS 幅 200px、CSS 高さ 1px、および赤いソリッドの DIV ボックスを設定します。 border

CSS コード:

#divcss5{height:100px;width:200px;border:1px solid #F00}

HTML コードに対応するフラグメント:

<div id="divcss5">我的高度为100px,宽度为200px</div>

DIV CSS を使用して境界線スタイルを設定します。通常、オブジェクトの境界線スタイルを設定するには略語

expression

を使用します。これにより、コードが節約され、コードが簡素化されます。関数。単一の境界線を設定する場合でも、4 辺の境界線を設定する場合でも、CSS 境界線コード (CSS 境界線の最適化の略称) を省略するように努めます。オブジェクトに CSS スタイルを設定するために一般的に使用される属性コードは次のとおりです: border:1px Solid #000;。

例えば、左右の下にボーダーがあり、スタイルは黒の1PX幅の実線ボーダーですが、上部にはボーダーがありません。 CSS コード: border:1px Solid #000; border-top:none;

border:1px Solid #000; の順序を入れ替えることはできないことに注意してください。 CSS の読み取りには上から下、左から右に読み取る原則があるため、最初に境界線スタイル全体を設定してから、上部の境界線を「なし」に宣言すること、つまり、これで必要なスタイルを実現することは意味がありません。実例。これにより、下、左、右の設定を個別に設定する必要がなくなり、ある程度のコード量が節約されます。

CSS Webページの境界線コード

関連記事