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>



　上記のように記述すると下記のように表示されます。


あいうえお



あいうえお
ハイスピードプラン