HTML - CSS - border 枠線の表示
- 1. border 枠線の表示
- 2. groove 例示
- 3. ridge 例示
- 4. outset 例示
1. border 枠線の表示
ご注意！
以下に例示がありますが、「Firefox」で見た場合は、見た目が異なりますが、「Vivaldi」ではただの太線で見た目が全く同じになります。
↑と書きましたが、色が黒だったからのようです。
「border」で枠線を表示します。
本ページは、下記のサイトを参考にさせていただきました。
「border - CSS: カスケーディングスタイルシート」
基本形は
border: 幅 種類 色;
なのですが、これ、「幅」「種類」「色」の順番は、関係ないんですって。
これは、びっくりですね。
それぞれを表現する形式が違うから、解釈可能ってことでしょうか？
主な種類は
| 値 | 意味 |
|---|
| none | 枠線を表示しない |
| hidden |
| solid | １本線で表示 |
| double | ２本線で表示 |
| groove | 立体的に窪んだ線で表示 |
| ridge | 立体的に隆起した線で表示 |
| outset | 上と左のボーダーが明るく、下と右のボーダーが暗く表示し、ボーダーで囲まれた領域全体が立体的に隆起したように表示。
上下左右の一部だけに指定しても立体感は出ない。 |
2. groove 例示
pre.sample01
{
margin-left: 2em;
margin-right: 4em;
padding: 1em;
border: 5px groove silver;
}
<pre class="sample01">
あいうえお
</pre>
上記のように記述すると下記のように表示されます。
あいうえお
3. ridge 例示
pre.sample02
{
margin-left: 2em;
margin-right: 4em;
padding: 1em;
border: 5px ridge silver;
}
<pre class="sample02">
あいうえお
</pre>
上記のように記述すると下記のように表示されます。
あいうえお
4. outset 例示
pre.sample03
{
margin-left: 2em;
margin-right: 4em;
padding: 1em;
border: 5px outset silver;
}
pre.sample04
{
margin-left: 2em;
margin-right: 4em;
padding: 1em;
border:inset 5px silver;
}
<pre class="sample03">
あいうえお
</pre>
<pre class="sample04">
あいうえお
</pre>
上記のように記述すると下記のように表示されます。
あいうえお
あいうえお
|
|
