CSS3 border-radius いまさら聞いてすいません
|CSSは専門外なので曖昧な事が多いですが少しづつ学びます!
という趣旨のシリーズです。
border-radius
何となく使っていたborder-radiusですが、理解が浅いのも気持ちが悪いので調べてみました。
border-radiusとは、角丸の距離を指定するプロパティです。
サンプルを作成して確認してみましょう。
実験してみる
分かりやすいように背景色をつけます。
<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <style> div.box-base { background-color:#52dff2; float:left; height:150px; margin:20px; width:150px; } div.box-radius { border-radius:30px; } </style> </head> <body> <div class="box-base"></div> <div class="box-base box-radius"></div> </body> </html>
こんな感じです。
右側のboxに30pxの角丸が指定されています。
値を色々変えて実験してみましょう。
それぞれ縦に並べてみました。
<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <style> div.box-base { background-color:#52dff2; float:left; height:150px; margin:10px; width:150px; } div.box-radius-circle{ border-radius:75px; } div.box-radius-halfcircle{ border-radius:75px 75px 0 0; height:75px; } div.box-radius-quartercircle{ border-radius:150px 0 0 0; height:150px; width:150px; } div.box-parent{ *zoom:1; } div.box-parent:after{ clear:both; content:""; display:block; } </style> </head> <body> <h2>正円</h2> <div class="box-parent"> <div class="box-base"></div> <div class="box-base box-radius-circle"></div> </div> <h2>半円</h2> <div class="box-parent"> <div class="box-base"></div> <div class="box-base box-radius-halfcircle"></div> </div> <h2>扇</h2> <div class="box-parent"> <div class="box-base"></div> <div class="box-base box-radius-quartercircle"></div> </div> </body> </html>
こんな感じです。
css3対応のブラウザ限定ですが、使い方をマスターするとデザイン幅が広がりそうですね!