CSS境界線
CSS Border
CSS Border プロパティ
CSS Border プロパティを使用すると、要素の境界線のスタイルと色を指定できます。
ボーダースタイル
ボーダースタイルプロパティは、表示するボーダーの種類を指定します。
border-style 屬性は、境界線のスタイルを定義するために使用されます
border-style 値:
none: デフォルトでは境界線なし
dotted: dotted: 點(diǎn)線フレームを定義します
破線: 點(diǎn)線ボックスを定義します
実線: 実線の境界を定義します
double: 2 つの境界を定義します。 2 つの境界線の幅と border-width の値は同じです
groove: 3D 溝の境界を定義します。効果は境界線の色の値によって異なります
ridge: 3D リッジ境界線を定義します。効果は境界線の色の値によって異なります
inset: 3D 埋め込み境界線を定義します。効果は境界線の色の値によって異なります
outset: 3D の突き出た境界線を定義します。 効果は境界線の色の値によって異なります
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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">無(wú)邊框。</p>
<p class="dotted">虛線邊框。</p>
<p class="dashed">虛線邊框。</p>
<p class="solid">實(shí)線邊框。</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>プログラムを?qū)g行して試してください
枠線の幅
border-width プロパティを使用して枠線の幅を指定できます。
境界線の幅を指定するには 2 つの方法があります。2px や 0.1em などの長(zhǎng)さの値を指定するか、thin、medium (デフォルト値)、thick の 3 つのキーワードのいずれかを使用します。
注: CSS は 3 つのキーワードの特定の幅を定義していないため、あるユーザー エージェントは細(xì)、中、太をそれぞれ 5px、3px、2px に設(shè)定し、別のユーザー エージェントは 3px、2px に設(shè)定する可能性があります。それぞれと1px。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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」屬性は、単獨(dú)で使用した場(chǎng)合には効果がありません。まず、「border-style」屬性を使用して境界線を設(shè)定する必要があります。
プログラムを?qū)g行して試してみましょう
境界線の色
border-color プロパティは、境界線の色を設(shè)定するために使用されます。設(shè)定できる色:
name - 「red」などの色の名前を指定します
RGB - 「rgb(255,0,0)」などの RGB 値を指定します
Hex - 16 進(jìn)數(shù)を指定します「#ff0000」などの値
枠線の色を「透明」に設(shè)定することもできます。
注: border-color は、単獨(dú)で使用すると機(jī)能しません。まず、border-style を使用して境界スタイルを設(shè)定する必要があります。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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">如是顛簸生世亦無(wú)悔。</p>
</body>
</html>プログラムを?qū)g行して試してみてください
境界線 - 各辺を個(gè)別に設(shè)定します
CSSでは、異なる辺に異なる境界線を指定できます:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>兩個(gè)不同的邊界樣式。</p>
</body>
</html>プログラムを?qū)g行して試してみましょう
border-style 屬性には 1 ～ 4 の値を指定できます:
border-style: 點(diǎn)線実線二重破線;
上の境界線は點(diǎn)線です
右の境界線は実線です
下の境界線は二重です
左の境界線は破線です
ボーダースタイル: 點(diǎn)線の実線二重;
上の境界線は點(diǎn)線です
左右の境界線は実線です
ble
ボーダースタイル: 點(diǎn)線の実線;
上下の境界線は點(diǎn)線です
左右の境界線は実線です
ボーダースタイル: dotted;
四辺の境界線は點(diǎn)線です
上記の例ではborder-styleを使用しています。ただし、border-width および border-color と一緒に使用することもできます。
Border - 短縮屬性
上の例では、多くの屬性を使用して境界線を設(shè)定しています。
T プロパティで境界線を設(shè)定することもできます。
「border」屬性で設(shè)定できます:
border-width
border-style (required)
border-color
instance
りー走るプログラムを試してみましょう
その他の例
4つの境界線の色を設(shè)定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>プログラムを?qū)g行して試してみましょう
CSS境界線のプロパティ
| 屬性 | 説明 |
|---|---|
| border | 1 つのステートメントで 4 つの側(cè)面の屬性を設(shè)定するために使用される省略屬性。 |
| border-style | は、要素のすべての境界線のスタイルを設(shè)定するか、各辺の境界線スタイルを個(gè)別に設(shè)定するために使用されます。 |
| border-width | 要素のすべての境界線の幅を設(shè)定するか、各境界線の幅を個(gè)別に設(shè)定するために使用される短縮屬性。 |
| border-color | 省略表現(xiàn)屬性。要素のすべての境界線の表示部分の色を設(shè)定するか、4 つの辺のそれぞれに色を設(shè)定します。 |
| border-bottom | 下部境界線のすべての屬性を 1 つのステートメントに設(shè)定するために使用される省略屬性。 |
| border-bottom-color | 要素の下枠の色を設(shè)定します。 |
| border-bottom-style | 要素の下枠のスタイルを設(shè)定します。 |
| border-bottom-width | 要素の下枠の幅を設(shè)定します。 |
| border-left | 省略屬性。左ボーダーのすべての屬性を 1 つのステートメントに設(shè)定するために使用されます。 |
| border-left-color | 要素の左境界線の色を設(shè)定します。 |
| border-left-style | 要素の左境界線のスタイルを設(shè)定します。 |
| border-left-width | 要素の左境界線の幅を設(shè)定します。 |
| border-right | 省略屬性。右ボーダーのすべての屬性を 1 つのステートメントに設(shè)定するために使用されます。 |
| border-right-color | 要素の右枠の色を設(shè)定します。 |
| border-right-style | 要素の右枠のスタイルを設(shè)定します。 |
| border-right-width | 要素の右枠の幅を設(shè)定します。 |
| border-top | 省略形屬性。上部の境界線のすべての屬性を 1 つのステートメントに設(shè)定するために使用されます。 |
| border-top-color | 要素の上枠の色を設(shè)定します。 |
| border-top-style | 要素の上枠のスタイルを設(shè)定します。 |
| border-top-width | 要素の上枠の幅を設(shè)定します。 |
