ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応

エ・ビスコム・テック・ラボ
2008-04-25 17:45:01
  • このエントリーをはてなブックマークに追加

ボックスの角を丸くした場合

 border-radiusプロパティでボックスの角を丸くすると、影も丸く表示される。Safari 3では-webkit-border-radiusで角丸を指定することが可能だ。border-radiusについては、下記2つの記事で紹介したので参考にしてほしい。

ボックスを角丸で表示したもの ボックスを角丸で表示したもの
div{
background-color: #ffaa00;
-webkit-box-shadow: 10px 10px 10px gray;
-webkit-border-radius: 30px;
}
ブラウザで表示を確認する

インライン要素に影をつけた場合

 インライン要素に影をつけることもできる。たとえば、に対して-webkit-box-shadowを指定すると次のような表示になる。なお、影の表示はテキストなどのレイアウトには影響しない。

インライン要素に影をつけたもの インライン要素に影をつけたもの
div{
line-height: 2;
}

span{
background-color: #ffaa00;
-webkit-box-shadow: 10px 10px 10px gray;
}
こんにちは。おはようございます。また会いましょう。 こんにちは。おはようございます。また会いましょう。 こんにちは。おはようございます。また会いましょう。 こんにちは。おはようございます。また会いましょう。 こんにちは。おはようございます。また会いましょう。
ブラウザで表示を確認する
  • コメント(1件)
#1 Cee   2008-05-01 17:34:23
重ねた時のSample良いですね。ゆくゆくは下の色を考慮してくれたらいいなぁ。。。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]