Google ChromeのCSS 3対応状況

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

CSS 3の背景に関するプロパティ:対応

 ChromeはCSS 3で追加された背景に関するプロパティのうち、Safariと同じようにbackground-clip、background-origin、background-sizeの3つに対応している。各プロパティは「-webkit-」をつけたかたちで利用する。また、1つの要素に複数の背景画像を表示する機能にも対応している。

Google Chromeでの表示。1つの要素に複数の背景画像を表示したもの。背景画像の表示範囲や大きさも調節している Google Chromeでの表示。1つの要素に複数の背景画像を表示したもの。背景画像の表示範囲や大きさも調節している
div     {
        background-image: url(flower-yellow.png), url(flower-green.png), url(white.png), url(photo.png);
        background-repeat: no-repeat, repeat-x, no-repeat, no-repeat;
        background-position: 3% 65%, 50% 85%, center center, left top;
        -webkit-background-clip: padding, border, padding, padding;
        -webkit-background-origin: padding;
        -webkit-background-size: auto auto, 20px 20px, auto 200%, auto auto;
        border: dashed 20px navy;
        width: 300px;
        padding: 90px 0px;
        }
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]