サイト内検索
...タグ・小技・etc...
ボックス
外角丸・内角のボックス
[サンプル]
外角丸・内角ボックスのサンプル
[メモ]
上辺(紫)・下辺の色(紫)左右のborderの色(グリーン)を揃えると
画像を使用しないで、 角丸のボックスを作ることができます。
外角丸のボックスについては、こちらをご覧ください。
外角丸・内角丸のボックスについては、こちら
をご覧ください。
Leoーnet
サンプルのソース
[スタイルシート]
/* ----------------- 左右の線・グリーン*/.sen{
border-left: 4px solid #bde3a6;
border-right: 4px solid #bde3a6;
}
/* ----------------- サイズ */
.sample{
width: 400px;
}
/* ----------------- テキスト欄の高さ ・白色*/
.sample p{
margin:0px;
padding:0.5em 1em;
background-color: #ffffff;
height: 100px;
}
/* ----------------- 上辺・下辺の色・紫 */
.kadotop span, .kadobottom span{
display:block;
height:1px;
overflow:hidden;
background-color: #c8a1f0;
}
/* ----------------- 角を削る色・白色 */
.kadotop, .kadobottom{
background: #ffffff;
}
/* ----------------- 角*/
.kado1{margin: 0px 5px;}
.kado2{margin: 0px 3px;}
.kado3{margin: 0px 2px;}
.kado4{margin: 0px 1px; height: 2px;}
[bodyの中]
<div class="sample"><div class="kadotop">
<span class="kado1"></span>
<span class="kado2"></span>
<span class="kado3"></span>
<span class="kado4"></span>
</div>
<div class="sen">
外角丸・内角ボックスのサンプル
</div><div class="kadobottom">
<span class="kado4"></span>
<span class="kado3"></span>
<span class="kado2"></span>
<span class="kado1"></span>
</div>
</div>