ホームページを作成に関する備忘録

css3で、角丸ボックスとボックスの影を

htmlファイル

<link href="kakumaru_kage.css" rel="stylesheet" type="text/css" />
<div class="maru_kage">
css3を使って
javascriptを使わずに、角丸ボックスとボックスに影をつける。
</div>

cssファイル(kakumaru_kage.css)

div.maru_kage
{
border: 1px solid;
border-radius: 10px;

-webkit-box-shadow: 5px 5px 10px #888888;  
box-shadow: 5px 5px 10px #888888;
}

htmlファイル

　まず1行目でcssファイルとリンクします。ここでは、kakumaru_kage.cssという名前にしました。ファイルでなく、同じHtmlファイルの<style type="text/css">〜</style>内に書いてもいいです。ここでは、div要素のスタイルを変えます。

cssファイル

　まず、htmlファイルのdiv要素にclass="maru_kage"と付けたので、div.maru_kageとしてスタイルを定義します。ここでは、border: 1px solidで、1pxの幅の枠線を書いています。次に、border-radius：で四隅を角丸にできます。これが、css3で利用できるようになったものです。ただ、IE8は対応していませんので、単なる角ばった枠線になります。後の10pxは、丸める半径を示していますので、この数字を変えると丸まり方が違ってきます。

　次の-webkit-box-shadow: 5px 5px 10px #888888;は、Safari用の文章で、最初の-webkit-を付けることによって、box-shadowがサポートされるということらしいです。firefoxやGoogle Chromeはそのままサポートしているので付けなくても良いようです。これは、プロパティのサポート状況によってどんどんと変わってくるらしいです。さて、後の 5px 5px 10px #888888 は、それぞれ水平方向のオフセット、垂直方向のオフセット、ぼかし具合（数字が大きいほど影がぼける）、影の色を表しています。

すると、下のようになります。

css3を使って javascriptを使わずに、角丸ボックスとボックスに影をつける。

また、borderを5px、radiusを25px、shadowを5px 5px 3px #333333とすると、下のようになります。

css3を使って javascriptを使わずに、角丸ボックスとボックスに影をつける。

また、borderを3px、radiusを5px、shadowを10px 10px 10px #888888とすると、下のようになります。

css3を使って javascriptを使わずに、角丸ボックスとボックスに影をつける。