WordPressのテーマ作成（3）　CSS3にチャレンジ　border-radius

Tweet

border-radius

まずは使用頻度が高くなりそうなborder-radiusです。
border-radiusは角丸を指定するプロパティです。

いくつか使用例を書いていきます。
どれも縦横100pxのサイズに適用しています。
（google chromeで見てください。）

border-radius:30px;
/*全部の角が半径30pxの角丸に*/

border-radius:40px　30px 20px 10px;
/*左上、右上、右下、左下の順で指定したサイズで角丸に*/

border-radius:30px 30px 30px 30px/10px 10px 10px 10px;
/*前半が左上、右上、右下、左下の横への角丸の長さ、
　 後半が左上、右上、右下、左下の縦への角丸の長さ*/

ベンダープレフィックスを付ける

実際に使うときは以下のようにベンダープレフィックスを付けます。
元のプロパティにそれぞれのブラウザ用のベンダープレフィックスを付けるだけです。

border-radius:40px　30px 20px 10px;
-moz-border-radius:40px　30px 20px 10px;
-webkit-border-radius:40px　30px 20px 10px;
-o-border-radius:40px　30px 20px 10px;
-ms-border-radius:40px　30px 20px 10px;
/*左上、右上、右下、左下の順で指定したサイズで角丸に*/

意外と簡単ですね。
どんどん身につけていくぞ!

にほんブログ村 パソコン・周辺機器

Tweet