Google ChromeのCSS 3対応状況

エ・ビスコム・テック・ラボ
2008-09-05 21:50:01
  • このエントリーをはてなブックマークに追加

ボックスのドロップシャドウ box-shadow：一部対応

　CSS 3のbox-shadowはボックスに影をつけるプロパティだ。Chromeでは、Safariと同じように-webkit-box-shadowというプロパティ名で対応している。しかし、ぼかしの半径の値を「0」にした場合や、ボックスを角丸で表示した場合には影の表示に問題が見られた。

Google Chromeでの表示 Google Chromeでの表示 
div#text01      {
        background-color: #ffff00;
        -moz-box-shadow: 20px 20px 20px #224466;
        -webkit-box-shadow: 20px 20px 20px #224466;
        margin-left: 150px;
        }

div#text02      {
        background-color: #ffaa00;
        -moz-box-shadow: 20px 20px 20px gray;
        -webkit-box-shadow: 20px 20px 20px gray;
        margin-top: -50px;
        }
※ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]