CSS境界線

CSS Border

CSS Border プロパティ

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

ボーダースタイル

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

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

border-style 値:

none: デフォルトでは境界線なし
dotted: dotted: 点線フレームを定義します
破線: 点線ボックスを定義します
実線: 実線の境界を定義します
double: 2 つの境界を定義します。 2 つの境界線の幅と border-width の値は同じです
groove: 3D 溝の境界を定義します。効果は境界線の色の値によって異なります
ridge: 3D リッジ境界線を定義します。効果は境界線の色の値によって異なります
inset: 3D 埋め込み境界線を定義します。効果は境界線の色の値によって異なります
outset: 3D の突き出た境界線を定義します。効果は境界線の色の値によって異なります

インスタンス

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

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

プログラムを実行して試してください

枠線の幅

border-width プロパティを使用して枠線の幅を指定できます。

境界線の幅を指定するには 2 つの方法があります。2px や 0.1em などの長さの値を指定するか、thin、medium (デフォルト値)、thick の 3 つのキーワードのいずれかを使用します。

注: CSS は 3 つのキーワードの特定の幅を定義していないため、あるユーザーエージェントは細、中、太をそれぞれ 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>
</body>

</html>

注: 「border-width」属性は、単独で使用した場合には効果がありません。まず、「border-style」属性を使用して境界線を設定する必要があります。

プログラムを実行して試してみましょう

境界線の色

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

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

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

Hex - 16 進数を指定します「#ff0000」などの値

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

注: 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">山河拱手，为君一笑 。</p>
<p class="two">如是颠簸生世亦无悔。</p>
</body>
</html>

プログラムを実行して試してみてください

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

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

Example

       <!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>两个不同的边界样式。</p>
</body>
</html>

プログラムを実行して試してみましょう

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

border-style: 点線実線二重破線;

上の境界線は点線です
右の境界線は実線です
下の境界線は二重です
左の境界線は破線です

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

上の境界線は点線です
左右の境界線は実線です
ble

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

上下の境界線は点線です
左右の境界線は実線です

ボーダースタイル: dotted;
四辺の境界線は点線です

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

Border - 短縮属性

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

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

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

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

instance

りー

走るプログラムを試してみましょう

その他の例

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

       <!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>

プログラムを実行して試してみましょう

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	要素の上枠の幅を設定します。

学び続ける

新しいファイル

<!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>两个不同的边界样式。</p> </body> </html>

提出するリセットコード

自動運転