css3の角丸の使い方

カテゴリー:CSS

今更ながらMaMoTaKuはまだCSS3を使ったことがありませんでした笑
でもCSS3を使えば角丸やグラデが簡単にできることも聞いたことがあったので
角丸だけでもやってみようと思いやってみた!

    .demo   {  
        border-radius: 10px;        /* CSS3草案 */  
        -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
        -moz-border-radius: 10px;   /* Firefox用 */  
    }  

    .demo   {  
        -webkit-border-top-left-radius: 10px;  
        -webkit-border-top-right-radius: 20px;  
        -webkit-border-bottom-right-radius: 30px;  
        -webkit-border-bottom-left-radius: 40px;  
        -moz-border-radius-topleft: 10px;  
        -moz-border-radius-topright: 20px;  
        -moz-border-radius-bottomright: 30px;  
        -moz-border-radius-bottomleft: 40px;  
    }  

なんかボーダーの設定みたいで意外に簡単だな〜
ただIEの6?7?
その辺りが使えないらしいけどページを作るときに全部CSS3でスタイル書いちゃえば角丸効かないやつにはしかくで表示されるからそれはそれでいんじゃねえの?
と思うMaMoTaKuでした笑