CSS3で円を描く

CSS3角丸「CSS3 radius」で、今更ながら気付いた事。
border-radiusで、数pxのみ指定する場合が多いのですが、半径分を計算して指定(50%で良い)すれば、円になるって事でした。知らなかった・・・
「角丸が伸びて接したら円になる」ちょっと考えたら当たり前の事ですねw
「radius=角丸」と覚えたのがNG、「radius=半径」と認識した方が良さそう。

CSS3 円

width: 150px; height:150px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;

IE動作環境:IE9以上

CSS3 楕円

参考CSS3: http://css-tricks.com/examples/ShapesOfCSS/
それにしても、 -moz- や -webkit- 何時まで考慮すれば良いのか・・・




コメント

コメントを書く
お名前:

メール:

Web URL:

コメント: [必須入力]

認証コード: [入力必須] ※ 画像の文字を半角で入力してください。
認証 : 一二三

 ※ 承認されたコメントのみ表示されます。