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-colorborder-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ページの境界線コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。