CSS3の角丸(border-radius)の使い方

0
     
    昨日に続いて、CSS3の角丸(border-radius)を使ってみました。

    画像を使わなくても、背景を丸くできるというすばらしいプロパティです。
    ie8以下では使えませんが、Safari,Chrome,firefoxではかんたんに使えます。


    Safari,Chrome,firefoxで使う


    border-radius:20px;                /* css3 */
    -weblit-border-radius:20px;     /* Safari,Chrome */
    -mo-border-radius:20px;         /* firefox */
    

    この3つだけでばっちり角丸くできます。

    背景色やpaddingなんかを指定してあげるとなお気持ちいいです。


    ie6,7,8で使う

    ただ、この技はie6,7,8では使えません。
    ほっといても角が丸くならないだけなんで問題ないんですが、解決方法がいくつかあるので一応書いておきます。


    CSS PIEを使う

    一番メジャーなスクリプトだと思います。
    border-radius/box-shadow/rgba/gradient/border-imageが使えます。



    ie-css3を使う

    behavior:url(ie-css3.htc);を付け加えるだけなので、実装は一番簡単です。
    text-shadow/box-shadow/border-radiusが使えます。



    まとめ

    このブログの一番下にあるページを進めたり戻ったりするところに角丸を実装していますので、参考までにご覧下さい。

    今はこれやったら画像でいいわと思うこともあるでしょうけど、今後どんどん実装が進んでいくと思うので、そのときに向けて準備はしっかりしておきたいと思います。



    ++++++++++++++++++++++++++++++++++++++++++++++++++

    有限会社アンブレラ STUDIO TEMPO
    〒530-0056 大阪市北区兎我野町5-6 栄ビル201
    TEL/FAX:06-6367-4413/06-6367-4414

    ++++++++++++++++++++++++++++++++++++++++++++++++++
           
    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    カレンダー

    S M T W T F S
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
    << December 2018 >>

    エントリー

    カテゴリー

    アーカイブ

    recent comment

    リンク

    プロフィール

    検索

    その他

    モバイル

    qrcode