CSS3で角丸はじめの一歩-PIE.htc使ってみた2-


PIE.htcを使ってIE6～8でも角丸が使えます。

behaviorの設定を外部CSSで行うときは、
urlを絶対パス（例：http://coder.blog.uhuru.co.jp/demo/2010/css3_gradation/PIE.htc）で記述してください。

ド派手ピンク

  • 角丸ピンクボタン風
  • 角丸ピンクボックス風
    ボタン風、ボックス風共に5pxの角丸です。

落ち着きブルー

  • 角丸ブルーボタン風
  • 角丸ブルーボックス風
    サイズを変えるのも、画像を使って無いからサイズを指定するだけで出来ますね。

元気イエロー

  • 角丸イエローボタン風
  • 角丸イエローボックス風
    色を付けるのも簡単。

癒しグリーン

  • 角丸グリーンボタン風
  • 角丸グリーンボックス風
    角丸具合（？）の変更も簡単。
    このボックスは10pxの角丸です。

情熱レッド

  • 角丸レッドボタン風
  • 角丸レッドボックス風
    線の太さを変えても角丸です。

大人ブラック

  • 角丸ブラックボタン風
  • 角丸ブラックボックス風
    点線の角丸も出来ます。

まったりブラウン

  • 角丸ブラウンボタン風
  • 角丸ブラウンボックス風
    左上の角だけ丸くしてみました。

    指定方法1
    -webkit-border-top-left-radius: 30px;/* webkit */
    -moz-border-radius-topleft: 30px;/* fx */
    この指定方法だとpieは左上30px角丸なりませんでした。

    指定方法2
    -moz-border-radius: 30px 5px 5px 5px;/* fx */
    /*------PIE setting-------*/
    -pie-border-radius: 30px 5px 5px 5px;
    /*------------------------*/
    この指定方法だとsafariは左上30px角丸にならないみたいです。※safari 3.1.2で確認。

中立グレー

  • 角丸グレータブ風
    角丸グレータブ風
  • 角丸グレーボックス風
    上のはタブ風です。上の角だけ角丸るとタブっぽく見えます。
    border-radius: 5px 5px 0px 0px;
    「左上 → 右上 → 右下 → 左上」の順で指定します。

元の記事に戻る