javascriptとcssで角丸を表現する方法

webサイト作成の際に手間になってくる角丸での表現ですが
画像を使わずにCSSのみで表現する方法があります。

<div style="background:red;color:white;width:200px;">
<div style="background:white">
<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;">
</div>
</div>
<p style="padding:2px;">
本文本文本文本文本文本文本文本文本文本文<br />
本文本文本文本文本文本文本文本文本文本文
</p>
<div style="background:white">
<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;">
</div>
</div>
</div>
2006/4/8 IEで正しく表示されないバグを修正(赤字が修正部分)

Browser View

本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文


でもこれだけでは芸がありません。
javascriptを使ってソースの中に余分なタグを極力書かないようにして
CSSで角丸を表現する方法がNifty Cornersで公開されています。

//角丸を付けたいdiv
<div id="nifty">
<p>
本文本文本文本文本文本文本文本文本文本文<br />
本文本文本文本文本文本文本文本文本文本文
<p>
</div>
//追加するjavascript
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
Rounded("div#nifty","red","whte"); //Rounded(要素名, 背景色, 前景色)
</script>
//追加するCSS
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

つまりjavascriptファイルやcssファイルを外部化している場合
ソースコードのdivにidを付けるだけで角丸が実現できます。

すごく便利です。
是非普、及してほしいものです。

関連エントリー

AjaxやJavaScriptのライブラリー
角丸javascriptライブラリ『curvyCorners』を使ってみる
XHTML+CSSに足りない5つのコト

スポンサードリンク

«最強のCSS編集ツール by Firefox | メイン | FireFox1.502リリース»