スマートフォン・タブレットからインターネットサーバーオペレーション HTML5.x

APPW.jp HTML5.x

CSS3 角丸とドロップシャドウを確認

CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation 24 July 2012

現時点で CSS3 角丸とドロップシャドウについての最新仕様はこのドキュメントに含まれています。

当サイトにおいても簡単な角丸とドロップシャドウを試しています。この CSS を確認してみました。

サンプル

    border: groove 3px #cccccc ;

    border-radius: 10px ;
    -moz-border-radius: 10px ;
    -webkit-border-radius: 10px ;

    box-shadow: 10px 10px 5px 5px #cccccc ;
    -moz-box-shadow: 10px 10px 5px 5px #cccccc ;
    -webkit-box-shadow: 10px 10px 5px 5px #cccccc ;

    background-color: #ccccdd ;

角丸は、border-radius にて設定します。各ブラウザの最新バージョンは、ベンダープレフィックスなしで対応済みです。念のため、旧バージョンでの表示のためにベンダープレフィックスを残しています。

ドロップシャドウは、box-shadow にて設定します。こちらも各ブラウザの最新バージョンは、ベンダープレフィックスなしで対応済みです。旧バージョンでの表示のためにベンダープレフィックスを残しています。

@supports ルールを設定してみます

CSS3 columns プロパティを試します

flexbox でも要注意の word-break プロパティ

Chrome 27 で flexbox の寸法と軸を試します

Chrome 27 で Flexbox の寸法の混在を試します

Flexbox の寸法とラインの組み合わせを試します

Chrome 27 で inline-flex を試します

CSS3 メディアクエリをおさらい

CSS3 グラデーションの最新仕様を確認

Chrome 24 でフレキシブルボックスの軸を試します

via IPv4

カテゴリー

アーカイブ