定番
履歴

CSS3 角を丸くする

CSS3 角を丸くする
丸角(まるかど)、角丸(かどまる)などと呼ばれることがありますが、角を丸くする表現はよく使われます。ひと昔前までは、角のための画像をわざわざ作っていましたが、今ではスタイルシートで簡単に表現することができます。       すべての角を丸くする 半径:10px
border-radius: 10px;
一部の角を丸くする
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
一括で指定する
border-radius: 10px 20px 30px 40px;
角の円弧を楕円にする
border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;
以前は以下のようにベンダープレフィックス(各ブラウザ専用接頭語)をつけていましたが、 2015年現在ではほぼすべてのブラウザが対応しているので、不要と思います。 環境の古いユーザに対しては、角が丸くなりませんが致命的なエラーではないので、 大きな懸念ではないでしょう。
        border-radius: 10px; //CSS草案
   -moz-border-radius: 10px; //Chrome、Safari 用
-webkit-border-radius: 10px; //Firefox用
2016-02-05 00:03:52
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top