css border_html/css_WEB-ITnose

CSS ボーダーは、ボーダーの幅、色、スタイルなど、HTML 要素 (div など) のボーダーを設定するために使用されます。この記事では、CSS のボーダー プロパティの詳細をプログラマに紹介します。興味のあるプログラマは参照してください。

CSS ボーダーは CSS ボーダー - ボーダー ボーダー スタイルの色、ボーダー スタイル、ボーダー幅の構文構造とアプリケーション ケースのチュートリアル

1. CSS ボーダーの基礎知識

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

2. Html の元の境界線と CSS 境界線の比較

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

border="1" bordercolor="#000000"

説明: テーブルの境界線の幅を 1px、CSS の色を黒に制御します。デフォルトはソリッド スタイルです。国境。

3. 境界線の構文

1. 4 つの境界線

border-left 通常、左境界線のスタイルを設定するには、
border-right を使用します。一般に、境界線スタイルは、上部境界線を設定するために
border-bottom を使用します。下の境界線のスタイルは通常、個別に設定されます。場合によっては、下の境界線のスタイルを CSS の下線効果として適用することもできます。
2. 4つの辺に同じ境界線を持つボーダーの略称

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

3. 通常、幅を設定できます。ボーダーの(太さ)、ボーダーのスタイル、ボーダーの色の3つの属性とパラメータです。

1)、境界線の色: border-color: #000

2)、境界線の太さ (幅): border-width: 1px

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

3)、border ボーダースタイル: border-style:solid

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

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 凸エッジを描画



4. CSS で左ボーダー、右ボーダー、上ボーダー、下ボーダーを分離

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

1. 1pxの黒破線の上境界線

border-top:1pxの破線#000

2. 1pxの黒の実線境界線

border-bottom:1px 実線 #000

3. 1px 黒の破線の左境界線

border-left:1px 破線の#000

4. 1px の黒の実線右境界線

border-right:1pxソリッド #000

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

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

1. ソリッド ボーダー: ソリッド

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

2. 破線の境界線: 破線

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

6. CSS border border の使用法

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

7. CSS ボーダー アプリケーションのケース コード

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

CSS コード:

#manong{border:1px solid #00F}

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

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

8. CSS 境界線の概要

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

十一、css边框border设置技巧

如左右下有边框并且样式为黑色1PX宽度实线边框，而上边没有边框。

CSS 代码：

border:1px solid #000; border-top:none;

注意border:1px solid #000; 和border-top:none;前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明顶部上边边框为“none”没有意思，即实现该实例要的样式。从而无需分别设置下、左、右，从而节约一定代码。

相关阅读：

css 教程

html教程

css 参考手册