ホームページ > 記事 > ウェブフロントエンド > CSS枠線の使い方
CSSボーダーのボーダー属性の使い方、ボーダーの属性とは何か、オブジェクトのボーダーの幅、色、破線、実線などのスタイルを制御する方法について詳しく紹介します。記事
CSSボーダーはCSSボーダー-ボーダーのボーダースタイルの色、ボーダースタイル、ボーダー幅の構文構造と応用事例チュートリアル
CSSボーダーの基礎知識
CSSボーダーはCSSボーダーはコントロールオブジェクトのボーダーエッジの幅、色、点線です、実線およびその他のスタイル CSS 属性
Html tableControl border:
border="1" bordercolor="#000000"
Description: テーブルの境界線の幅を 1px、CSS カラーを黒、およびデフォルトに制御しますソリッドスタイルのボーダーです。
4 つの境界線
border-left は、左側の境界線を個別に設定します。
border-right は、右側の境界線を個別に設定します。通常、上の境界線は
bottom
を使用して、下の境界線を個別に設定します。 CSSの下線効果。 #div{border:1px Solid #00F}div5オブジェクトボックスを1pxピクセルの青い実線ボーダーに設定します3種類のボーダースタイル通常は幅を設定できます境界線の(太さ)、境界線のスタイル、境界線の色。 枠線の色:border-color
:#000枠線の太さ(幅): border-width
:1pxborder 境界線スタイル: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 #0002. 1pxの黒の実線の下ボーダー
border-bottom:1px solid #0003. 1 ピクセルの黒の点線の左ボーダー
border-left:1px dashed #0004. 1 ピクセルの黒の実線右ボーダー一般的な推奨事項ボーダー スタイル 通常、主流のブラウザーと互換性のあるボーダー スタイルを使用します: 実線のボーダー: 実線 ボーダー: 1 ピクセルの実線 #000オブジェクトを 1px (ピクセル) の太さの黒い実線の境界線に設定します。 破線: 破線Border:1px 破線 #000 オブジェクトの 1px (ピクセル) の太さの黒い点線の境界線を設定します。 CSS境界線の使用オブジェクトの境界線スタイルを設定し、上境界線、下境界線、左境界線、右境界線のスタイルを個別に設定して、美化と美しさを実現します。境界線はセグメント化とレイアウト計画の役割を果たします。 枠線スタイルの最適化の簡略化されたグラフィックチュートリアルCSS枠線アプリケーションのケースコード説明: ケース効果を観察するために、CSS幅200px、CSS高さ1px、赤い実線枠のDIVボックスを設定します
border-right:1px solid #000HTML コード対応スニペット:
#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枠線の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。