角丸を使いたい。
でもイメージや背景画像だと、この先使いづらい。
では、どうする？
↓こんな書き方もをする時もある。
■ HTML
<div class="rbox">
<div class="rtop">
<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span>
</div>
<div class="textbox">
ここにテキスト
</div>
<div class="rbottom">
<span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>
</div>
</div>
■ CSS
.rbox {
width:300px;
background-color:#cccccc;
}
.textbox {
margin:0px;
padding:10px;
background-color:#cccccc;
}
.rtop, .rbottom{
background-color:#ffffff;
}
.rtop span, .rbottom span{
display:block;
height:1px;
overflow:hidden;
background-color:#cccccc;
}
.r1{margin: 0px 5px;}
.r2{margin: 0px 3px;}
.r3{margin: 0px 2px;}
.r4{margin: 0px 1px; height: 2px;}
でもspanの中、入ってないよ。アウトじゃないの？
じゃーこれで。
欲しい感じの設定からHTMLとCSSを吐き出させる。
あとは、コピペ。
http://www.roundedcornr.com/
