スタイルシートを使って影をつける

イメージを持ち込まずにボックスに影をつけることが出来るか？...どうやらできるようだ。

3ピクセルの幅にしたけど、2ピクセルくらいでもそれなりに見えそうな感じ。

あと<sytle>のタグを本文中に記述するとなんかセーブするときに文句言われるが、表示は出来るようだ。

…よく見たら</style>を一個余計に記述してしまっているという自分のミスだった。orz疑ってすまん。＞bloggerのシステム。

影の幅を2ピクセルにしてみるとこんな感じ。あっさりしていて悪くはないよね。

3ピクセル版のソース

<style>
<!--
.shadow_box0 {
  padding: 4px;
  border-top:none;
  border-left:none;
  border-bottom:1px solid #000;
  border-right:1px solid #000;
}
.shadow_box1 {
  padding: 0px;
  border-top:none;
  border-left:none;
  border-bottom:1px solid #666;
  border-right:1px solid #666;
}
.shadow_box2 {
  padding: 0px;
  border-top:none;
  border-left:none;
  border-bottom:1px solid #aaa;
  border-right:1px solid #aaa;
}
-->
</style>

<div class="shadow_box2" style="width:300px;">
<div class="shadow_box1">
<div class="shadow_box0">
イメージを持ち込まずにボックスに影をつけることが出来るか？...
</div>
</div>
</div>