ホームページ > 記事 > ウェブフロントエンド > CSS枠線の使い方

CSS枠線の使い方

php中世界最好的语言オリジナル: 2017-11-21 16:39:562174ブラウズ

CSSボーダーのボーダー属性の使い方、ボーダーの属性とは何か、オブジェクトのボーダーの幅、色、破線、実線などのスタイルを制御する方法について詳しく紹介します。記事

CSSボーダーはCSSボーダー-ボーダーのボーダースタイルの色、ボーダースタイル、ボーダー幅の構文構造と応用事例チュートリアル

CSSボーダーの基礎知識

CSSボーダーはCSSボーダーはコントロールオブジェクトのボーダーエッジの幅、色、点線です、実線およびその他のスタイル CSS 属性

Html tableControl border:

border="1" bordercolor="#000000"

Description: テーブルの境界線の幅を 1px、CSS カラーを黒、およびデフォルトに制御しますソリッドスタイルのボーダーです。

4 つの境界線

border-left は、左側の境界線を個別に設定します。

border-right は、右側の境界線を個別に設定します。通常、上の境界線は

bottom

を使用して、下の境界線を個別に設定します。 CSSの下線効果。

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

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

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

3種類のボーダースタイル

通常は幅を設定できます境界線の(太さ)、境界線のスタイル、境界線の色。

枠線の色:

border-color

:#000

枠線の太さ(幅): border-width

:1px

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

border 境界線スタイル:

border-style

: ソリッド

境界線スタイルの値は次のとおりです:

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の値に基づいてひし形の境界線を描画します 3D凹型エッジを描画する値

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

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

CSSスタイルの設定方法で上下左右のボーダーを個別に記述します

1. 1pxの黒点線の上ボーダー

border-top:1px dashed #000

2. 1pxの黒の実線の下ボーダー

border-bottom:1px solid #000

3. 1 ピクセルの黒の点線の左ボーダー

border-left:1px dashed #000

4. 1 ピクセルの黒の実線右ボーダー

一般的な推奨事項ボーダースタイル

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

実線のボーダー: 実線

ボーダー: 1 ピクセルの実線 #000オブジェクトを 1px (ピクセル) の太さの黒い実線の境界線に設定します。

破線: 破線

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

CSS境界線の使用

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

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

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

説明: ケース効果を観察するために、CSS幅200px、CSS高さ1px、赤い実線枠のDIVボックスを設定します

border-right:1px solid #000

HTML コード対応スニペット:

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

css 境界線の概要

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

式

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

11. 3辺にボーダーがあるのに、1辺に設定スキルがありません

例えば、左右の下にボーダーがあり、スタイルは黒の1PX幅のベタボーダーですが、上にはボーダーがありません。

CSS コード:

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

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

CSS 境界線を使用する方法はたくさんありますので、必要な方はこのサイトの他の更新にも注目してください。

CSS枠線の使い方

関連記事