CSS 边框

CSS ボーダー（Border）は、要素の境界線のスタイルを定義するためのプロパティです。

ボーダーは任意のHTML要素に適用でき、視覚効果を高めたり、コンテンツを区切ったり、要素を強調表示したりするために使用されます。

CSSのボーダープロパティには、主にボーダーの幅、ボーダーのスタイル、ボーダーの色、およびショートハンドプロパティが含まれます。

CSS 枠線プロパティ

CSSのボーダープロパティを使用すると、要素のボーダーのスタイルと色を指定できます。

边框样式

ボーダースタイルプロパティは、表示する境界線の種類を指定します。

border-styleこのプロパティは、表示するボーダーの種類を指定するために使用されます。

使用できる値は次のとおりです：

• dotted：点線の枠線を定義します。
• dashed：破線の枠線を定義します。
• solid：実線の枠線を定義します。
• double：二重線の枠線を定義します。
• groove： 三次元の溝のあるボーダーを定義します。効果は border-color の値によって異なります。
• ridge： 三次元の尾根状のボーダーを定義します。効果は border-color の値によって異なります。
• inset： 三次元の埋め込みボーダーを定義します。効果は border-color の値によって異なります。
• outset： 三次元の突き出たボーダーを定義します。効果は border-color の値によって異なります。
• none：枠線なしを定義します。
• hidden：非表示の枠線を定義します。

border-style 演示:

none: デフォルトは枠線なし

dotted: 点線のボーダーを定義します。

dashed: 破線のボーダーを定義します。

solid: 実線の枠線を定義します

double: 2つのボーダーを定義します。 2つのボーダーの幅は border-width の値と同じです。

groove: 3Dの溝状ボーダーを定義します。効果はボーダーの色の値によって異なります。

ridge: 3Dの尾根状ボーダーを定義します。効果はボーダーの色の値によって異なります。

inset: 3Dの埋め込みボーダーを定義します。効果はボーダーの色の値によって異なります。

outset: 3Dの突出したボーダーを定義します。効果はボーダーの色の値によって異なります。

尝试一下 »

边框宽度

border-width プロパティを使用して、ボーダーの幅を指定できます。

ボーダーの幅を指定する方法は2つあります。 2px や 0.1em（単位は px, pt, cm, em など）のような長さの値を指定するか、thick 、medium（デフォルト）、thin の3つのキーワードのいずれかを使用します。

注意：CSSは3つのキーワードの具体的な幅を定義していないため、あるユーザーは thick 、medium 、thin をそれぞれ 5px、3px、2px に設定するかもしれませんが、別のユーザーはそれぞれ 3px、2px、1px に設定するかもしれません。

边框颜色

border-color プロパティは、ボーダーの色を設定するために使用されます。設定できる色:

• name - 色の名前を指定します（例: "red"）
• RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
• Hex - 16進数値を指定します。例: "#ff0000"

ボーダーの色を "transparent" に設定することもできます。

注意：border-color を単独で使用しても効果はありません。最初に border-style を使用してボーダースタイルを設定する必要があります。

枠線 - 各辺を個別に設定

CSSでは、異なる側面に異なるボーダーを指定できます。

上記の例では、単一のプロパティを設定することもできます：

border-style プロパティは1〜4つの値を指定できます：

• border-style:dotted solid double dashed;
  • 上枠線は dotted
  • 右枠線は solid
  • 下枠線は double
  • 左枠線は dashed
  
  
• border-style:dotted solid double;
  • 上枠線は dotted
  • 左、右の枠線は solid
  • 下枠線は double
  
  
• border-style:dotted solid;
  • 上、下の枠線は dotted
  • 右、左の枠線は solid
  
  
• border-style:dotted;
  • 四辺の枠線は dotted

上の例ではborder-styleを使用しました。しかし、それはborder-widthやborder-colorと一緒に使用することもできます。

枠線 - ショートハンドプロパティ

上記の例では、ボーダーを設定するために多くのプロパティを使用しています。

1つのプロパティでボーダーを設定することもできます。

"border" プロパティで設定できます：

• border-width
• border-style (required)
• border-color

更多实例

単一の宣言内のすべてのボーダープロパティ
この例では、ショートハンドプロパティを使用して、4つのボーダープロパティすべてを1つの宣言で設定する方法を示しています。

下枠線のスタイルを設定
この例では、下ボーダーのスタイルを設定する方法を示しています。

左枠線の幅を設定
この例では、左ボーダーの幅を設定する方法を示しています。

4つの枠線の色を設定する
この例では、4つのボーダーの色を設定する方法を示しています。1〜4つの色を設定できます。

右枠線の色を設定
この例では、右ボーダーの色を設定する方法を示しています。

设置渐变色边框
この例では、グラデーションカラーの枠線を設定する方法を説明します。

CSS 枠線プロパティ