【ボックス】gif画像なしで 角丸ボックスだ
現在作成しているサイトでの 吸収した知識・技術ネタ・・・
◎ gif画像など使わないで、簡単にCSSだけで、角丸ボックスを創りたかった！
[ネタ元]ありがとうございました！
[実現手順]
・CSSの配置
#menubox1 { /* 親ボックス */
width: 130px;
background-color: #ff8c00;
position: absolute;
top:22px;
left: 260px;
}
#menubox1 p{
margin:0px;
padding:0.5em 1em;
background-color:#ff8c00;
vertical-align:middle;
}
.rtop1, .rbottom1{
background:#FFFFFF;
}
.rtop1 span, .rbottom1 span{
display:block;
height:1px;
overflow:hidden;
background-color:#ff8c00;
}
・HTMLで読み込む
<div id="menubox1">
<div class="rtop1">
<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span>
</div>
<p><br><a href="">こんな</a><br>
<a href="">感じ</a><br><br></p>
<div class="rbottom1">
<span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>
</div>
</div>
[チョイ技]
・ボックス固定して、左右に３つ並べる
position: absolute;
top:22px;
left: 260px;
・高さ決まったボックスで、文字をボックスのmiddleにする
<p><br><a href="">こんな</a><br>
<a href="">感じ</a><br><br></p>
[次回課題]
・この方式で、マウスオーバーでボックス全体の色変更
