画像を使わずに角丸ボックスを使用する・Rico
配布元：Rico ( javascriptライブラリ )
まぁjavascript使用のため、今回も当然js無効の場合は効果なし。
DEMO ： こんな感じ。
Ricoのおかげで画像を使わずにこのボックスの四隅が丸くなってます。
Ricoを使ったコーナーはcornersでいろいろと指定できる。各サンプルはこちら。
Javascriptが無効の場合は単なる「四角」のdivボックスになるだけ。なんら動作に問題なし。
htmlソース
<head>
<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/rico.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function(){
new Rico.Effect.Round('div','box01');
}
// --></script>
</head>
<body>
<div class="box01">
<p>Ricoのおかげで画像を使わずにこのボックスの四隅が丸くなってます。</p>
</div>
new Rico.Effect.Round('div','box01');部分は前の'div'部分が要素で後ろの'box01'がクラス名。
上のサンプルはbox01にcss側で背景色水色と幅500pxを指定しているが別に('div','box01');の中で指定してもよさそう。
その他のパターン。ボーダー付けたいとか、一部の角だけ丸めたいとか。
上の「new Rico.Effect.Round('div','box01');」部分をこんな感じにすればよさげ。
/* ボーダーつけたい時 */
new Rico.Effect.Round('div','border',{border:'#000'});
/* 一部だけ丸くしたいとき(右上だけの場合) */
new Rico.Effect.Round('div','tr',{corners:'tr'});
