html
<div class="box_01"> <div class="box_02"> <ul> <li><a href="#">あいうえお</a></li> <li><a href="#">あいうえお</a></li> <li><a href="#">あいうえお</a></li> <li><a href="#">あいうえお</a></li> <li><a href="#">あいうえお</a></li> </ul> </div> </div>
css
.box_01 {
background: url(images/box_01.gif) no-repeat top;
width: 261px;
padding: 5px 0 0 0;
}
.box_02 {
background: url(images/box_02.gif) no-repeat bottom;
padding: 10px;
}
角丸グラデーションを使ったボックスの作り方。
２枚の画像を使って作ります。
divを入子にしてbox_01に角丸上部分の画像を指定。box_02に背景部分から下の角丸部分の画像を指定します。
注意：box_02に指定している背景画像の高さ以上に中身がある場合は途中で画像が切れてしまいます。
当サインプルは高さを2000pxまで表示可能です。