CSSの境界線


CSS ボーダー

CSS ボーダーは、要素のコンテンツとパディングを囲む 1 つ以上の線であり、これらの線のスタイル、幅、色をカスタマイズできます。 CSS 境界線プロパティを使用すると、HTML よりも優れた効果を作成できます。

CSS Border プロパティ

CSS Border プロパティを使用すると、要素の境界線のスタイルと色を指定できます。


四辺すべての境界線
赤い下の境界線

角の丸い境界線

幅のある左の境界線、色は青

ボーダースタイル

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

border-style 属性は、境界線のスタイルを定義するために使用されます

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 などの長さの値を指定するか、thin、medium (デフォルト値)、thick の 3 つのキーワードのいずれかを使用します。

注: CSS は 3 つのキーワードの特定の幅を定義していないため、あるユーザー エージェントは、thin、medium、thick をそれぞれ 5px、3px、2px に設定し、別のユーザー エージェントは 3px、2px に設定する可能性があります。それぞれと1px。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>

サンプルの実行 »

オンラインサンプルを表示するには、[サンプルの実行] ボタンをクリックしてください

境界線の色

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

  • name - 「red」などの色の名前を指定します

  • RGB - 「rgb(255,0,0)」などのRGB値を指定します

  • Hex - 「#ff0000」などの 16 進数のコントロール値を指定します

境界線の色を「透明」に設定することもできます。

注: border-color は単独で使用すると機能しません。最初に border-style を使用して境界線のスタイルを設定する必要があります。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one
{
	border-style:solid;
	border-color:red;
}
p.two
{
	border-style:solid;
	border-color:#98bf21;
} 
</style>
</head>

<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンライン例を表示します

境界線 - 各辺を個別に設定します

CSSでは、異なる辺に異なる境界線を指定できます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

上記の例では、単一の属性を設定することもできます

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	border-style:dotted solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>

インスタンスの実行» 「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

YBorder-Style 属性には 1 ～ 4 の値を指定できます:

  • Border-style: 点線の実線二重破線、下の境界線は二重です

    左の境界線は破線です

      • border-style: 点線実線の二重;

      • 下の境界線は二重です

    • ボーダースタイル: 点線の実線;

  • 上下の境界線は点線です

    • border-style :dotted;

    • 四辺の境界線は点線です

  • 上の例ではborder-styleを使用しています。ただし、border-width および border-color と一緒に使用することもできます。

    Border - 省略形の属性
      • 上の例では、多くの属性を使用して境界線を設定しています。

    • T プロパティで境界線を設定することもできます。

      • 「border」属性で設定できます:

      • border-width

  • border-style (必須)

      • border-color

    Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	border:5px solid red;
}
</style>
</head>

<body>
<p>段落中的一些文本。</p>
</body>
</html>

走るインスタンス »

オンライン例を表示するには、[例の実行] ボタンをクリックしてください

その他の例

  • 例: 1 つの宣言内のすべての境界線プロパティ
  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p 
{
	border-style:solid;
	border-top:thick double #ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>

    • 例の実行»

  • 「例の実行」をクリック" オンライン例を表示するボタン

この例では、短縮属性を使用して、同じステートメント内で 4 つの境界線プロパティをすべて設定する方法を示します。

例: 下部の境界線のスタイルを設定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>

<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>

例を実行します »

オンラインの例を表示するには、[例を実行] ボタンをクリックしてください
この例は、下部の境界線のスタイルを設定する方法を示します。国境。

例: 左境界線の幅を設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p 
{
	border-style:solid;
	border-left-width:15px;
}
</style>
</head>

<body>
<p><b>注意:</b>"border-left-width" 单独使用没有效果.要先使用 "border-style" 属性设置borders.</p>
</body>
</html>

例を実行する»
「例を実行」ボタンをクリックしてオンライン例を表示します

この例では、左境界線の幅を設定する方法を示します。

例: 4 つの境界線の色を設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one
{
	border-style:solid;
	border-color:#0000ff;
}
p.two
{
	border-style:solid;
	border-color:#ff0000 #0000ff;
}
p.three
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>

<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>

例を実行します »
「インスタンスを実行」ボタンをクリックしてオンライン例を表示します

この例は、4 つの境界線の色を設定する方法を示しています。 1色から4色まで設定可能です。

インスタンス: 右の境界線の色を設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p 
{
	border-style:solid;
	border-right-color:#ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

インスタンスを実行します »

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

CSS 境界線属性

属性 説明
border 短縮形属性。1 つのステートメントで 4 つの辺の属性を設定するために使用されます。
border-style は、要素のすべての境界線のスタイルを設定したり、各辺の境界線スタイルを個別に設定したりするために使用されます。
border-width 要素のすべての境界線の幅を設定するか、各境界線の幅を個別に設定するために使用される短縮属性。
border-color 省略表現属性では、要素のすべての境界線の表示部分の色を設定するか、4 つの辺のそれぞれの色を設定します。
border-bottom 短縮属性。下枠のすべての属性を 1 つのステートメントに設定するために使用されます。
border-bottom-color要素の下枠の色を設定します。
border-bottom-style要素の下枠のスタイルを設定します。
border-bottom-width要素の下枠の幅を設定します。
border-left 短縮属性。左ボーダーのすべての属性を 1 つのステートメントに設定するために使用されます。
border-left-color要素の左枠の色を設定します。
border-left-style要素の左境界線のスタイルを設定します。
border-left-width要素の左境界線の幅を設定します。
border-right 短縮属性。右ボーダーのすべての属性を 1 つのステートメントに設定するために使用されます。
border-right-color要素の右枠の色を設定します。
border-right-style要素の右枠のスタイルを設定します。
border-right-width要素の右枠の幅を設定します。
border-top 短縮属性。上部の境界線のすべての属性を 1 つのステートメントに設定するために使用されます。
border-top-color要素の上枠の色を設定します。
border-top-style要素の上枠のスタイルを設定します。
border-top-width要素の上枠の幅を設定します。
←
→