MENU

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

2012 1/26

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

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

CurvyCorners

使い方は、ダウンロードしてきた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でも丸くなります。

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

この記事が気に入ったら
フォローしてね!

著者について

コメント

コメントする

目次
閉じる