DIV CSS 境界線スキル
オブジェクトの上下左右の境界線を同じスタイルに設定すると、上下の属性と対応する値を書き出さずに省略できます。 、左、右にそれぞれ。
例、上下左右の境界線を幅1px、実線、黒枠に設定します。 CSSコードは以下の通りです:
border:1px Solid #000;
DIV CSSの完成例:
インスタンスコンテンツ設定CSS CSSに名前を付けますyangshi のセレクターで、属性セレクターのスタイルは、幅 1 ピクセル、幅 200 ピクセル、高さ 50 ピクセルの黒い実線の境界線を持つ長方形です。
CSS コード:
.yangshi{ border:1px Solid width:200px; 50px ;}/* オブジェクト スタイルを設定*/ |
www.divcss5。 com CSS の例 |
上の図は、CSS 境界線の例のメイン コード スニペットのスクリーンショットです
注: 上記のコードは、表示効果に対応しています。実線はDWソフトが自動的にDIVボックス領域に追加するため、実際のブラウジングではこのような点線は表示されませんのでご了承ください。
例えば、左右の下にボーダーがあり、スタイルは黒の1PX幅の実線ボーダーですが、上部にはボーダーがありません。
CSS コード: border:1px Solid #000; border-top:none;
border:1px Solid #000; の順序を入れ替えることはできないことに注意してください。 CSS の読み取りには上から下、左から右に読み取る原則があるため、最初に境界線スタイル全体を設定してから、上部の境界線を「なし」に宣言すること、つまり、これで必要なスタイルを実現することは意味がありません。実例。これにより、下、左、右の設定を個別に設定する必要がなくなり、ある程度のコード量が節約されます。