pict-jquery.png jQuery用プラグインCurvyCornersの紹介記事の続きです。

角丸処理を行うcorner関数にはパラメータを渡すことで４カ所のコーナーそれぞれの角丸と角丸の半径を指定したりすることができます。また角丸部分の処理をアンチエイリアスON/OFF指定することも可能です。


  1. <script type="text/javascript">
  2. $(function() {
  3.     $('.sample3').corner({
  4.     tl: { radius: 6 },
  5.     tr: { radius: 6 },
  6.     bl: { radius: 0 },
  7.     br: { radius: 0 }});
  8. });
  9. </script>
で以下のようなHTMLを記述すると
  1. <div class="sample3" style="background:#777;padding:10px;color:#fff;width:400px">
  2. ここが角丸になったDIVです。上の両コーナーのみ角丸です。      
  3. </div>

ここが角丸になったDIVです。上の両コーナーのみ角丸です。

CurvyCornersでは画像を背景につかったBOX要素も角丸にできます。

背景に画像を使ったDIVです

CurvyCornersの難点はJavascriptで動的に角丸を作成するために処理に時間がかかることです。このページのようにいくつも角丸コーナーを同一ページ内に多用するとページの表示に時間がかかってしまいますので、ケースバイケースでイメージ画像を使った一般的な角丸コーナーと使い分けるとよいと思います。

jQueryプラグインCurvyCornersを使う(1)へ

まだ投票はありません