CSS3の追加機能
今日はCSS3のリッチな追加機能というのを試してみた。
【ボックスやテキストに影をつける】
box-shadow
text-shadow
【境界線を丸める】
border-radius
【背景をグラデーションにする】
background:gradient
そして仕様が確定するまではベンダープレフィックスを使う。
Firefox = -moz-
Webkit(Safari,Chrome) = -webkit-
Opera = -o-
InternetExplorer = -ms-
例えばボックスに影をつけたい場合は、
- moz-box-shadow: 1px 1px 5px #000000;
- webkit-box-shadow: 1px 1px 5px #000000;
そして将来プレフィックスなしで実装されたときのために
指定なしの
box-shadow: 1px 1px 5px #000000;
を書いておくといいみたい。
先のことを考えるのは大切だね。
以前までは、境界線を丸めるとか背景をグラデーションにするとか
めんどくさい作業だったらしい。
いつものことだけど、わたしはこれしか知らないのです。
ここから始まるのです。