角丸CSS改
Studio Azatorでよく使っている角丸ボックスを少し直しました。
横幅固定、空divを使わずに、かつ不要なテキスト入れなくて済むタイプです。
ここに内容が入ります。
550px幅の角丸ボックスを作ります。以下が用意する画像
・上の画像
・真ん中の画像
・上の画像
htmlソース
<div class="km_top"><hr></div>
<div class="km_middle">完成品サンプル<br />ここに内容が入ります。</div>
<div class="km_bottom"><hr></div>
CSS
.km_top{
background:url(images/kadomaru_top.gif) no-repeat right top;
width:550px;
margin-top:10px;
height:0;
padding-top:20px;
overflow:hidden;
}
.km_top hr{
margin:0;
border:none;
}
.km_middle{
background:url(images/kadomaru_middle.gif) repeat-y;
padding:15px;
width:520px;
}
.km_bottom{
margin-bottom:10px;
background:url(images/kadomaru_bottom.gif) no-repeat right top;
height:0;
padding-top:20px;
width:550px;
}
.km_bottom hr{
margin:0;
border:none;
}
横幅も可変の角丸ボックスは準備中です。しばらくお待ち下さい。
