IE6からでも角丸に。CSS3を使わずJavaScriptでやります。

CSS3で角丸、便利なんですけど、IEは9でも無視ですから、使えません。

なので、こちらを使って丸くします。

CurvyCorners
http://www.curvycorners.net/

使い方は、ダウンロードしてきたcurvycorners.jsを読み込んで、下記のように<head>に書きます。

読み込み

<script type="text/JavaScript" src="curvycorners.js"></script>

設定

<script type="text/JavaScript">
  addEvent(window, 'load', initCorners);
  function initCorners() {
    var settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true
    }
    curvyCorners(settings, "#wrapper");
  }
</script>

ここで、settingsに保存されているtl, tr, bl, brは、top, bottom, left, rightです。

IE6でも丸くなります。

複数の対象に対して指定する方法などは同梱の解説ファイルを読んでみてください。

↓ プラグインを作る方々への本、書きました。 ↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です