• css3

    角丸(border-radius)

    2012/07/24

    おなじみ角丸の指定について。

    角丸2-1-1-1.png

    角丸

    書き方はこれ。

    
    border-radius:角に指定する円の半径;
    
    

     

    たとえば、こんな角丸のボックス。

    角丸.png

    
    .box{
      width: 200px;
      height: 100px;
      background: #F90;
      border-radius:10px;
    }
    
    

    これは、ボックスの四隅全てに半径10pxの円を指定しています。

    これが角丸になるわけですね!

     

    角丸2-1-1-1.png

    四隅の記述は左上⇒右上⇒右下⇒左下の順になります。

     

     

     

    このように書けばこんなへんな形も

    角丸3.png

    
    border-radius:40px 30px 80px 20px;
    
    

     

     

     

    角丸42-1.png

    絵に書くとこんな感じ。

    こりゃわかりにくい・・!\(^o^)/

     

     

    しかし、正円じゃないと指定できないわけではありません。

    楕円がいーよ!楕円したいよ!ってあなた。大丈夫です。

     

    記述の仕方はこうなります。

    
    border-radius:水平方向の半径(左上から)/直角方向の半径(左上から);
    
    

    記述順のように、まずは左上⇒右上⇒右下⇒左下の水平方向の半径/(スラッシュ)左上⇒右上⇒右下⇒左下の直角方向の半径
    このように指定していきます。

    ちょっと大きなボックスでやってみます。

     

    角丸5.png

     

    これはこのような指定になります。

    
    .box{
      width:500px;
      height:300px;
      background:#F90;
      border-radius: 100px 25px 50px 60px / 50px 25px 50px 30px;
    }
    
    

    指定している円はこんな感じ

    角丸72.png

     

    このように、楕円、正円混ぜた角丸も指定できます。

    角丸素敵!

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back