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 にて設定します。こちらも各ブラウザの最新バージョンは、ベンダープレフィックスなしで対応済みです。旧バージョンでの表示のためにベンダープレフィックスを残しています。