スタイルシート 4

■ スタイルシート Part.4

前回は、テーブルの枠の色を徐々に変えてみました。
今回は、もっと特殊な枠を作ってみます。

枠に濃い影をつける
groove

ここに文章や画像をいれます

<table width="300" height="50" style="border:10px groove #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

枠に薄い影をつける
ridge

ここに文章や画像をいれます

<table width="300" height="50" style="border:10px ridge #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

枠を立体的に（へこませる）
inset

ここに文章や画像をいれます

<table width="300" height="50" style="border:6px inset #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

枠を立体的に（でっぱらせる）
outset

ここに文章や画像をいれます

<table width="300" height="50" style="border:6px outset #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

このように、スタイルシートをテーブルに組み合わせることによって、
枠のバリエーションを一気に増やすことができました。

次回は、テーブルの背景をグラデーションにする方法です。