サイト内検索
...タグ・小技・etc...
ボックス
外角丸のボックス
[サンプル]
外角丸ボックスのサンプル
[メモ]
上辺(紫)・下辺の色(紫)ボックス内(ピンク)の色を揃えると
画像を使用しないで、背景色のある外角丸のボックスを作ることができます。
外角丸・内角のボックスについては、こちらをご覧ください。
外角丸・内角丸のボックスについては、こちら
をご覧ください。
WEB工房きくちゃんを参照させていただきました。
[角丸テーブルの紹介をされているサイト]Leoーnet
サンプルのソース
[スタイルシート]
/* ----------------- サイズ */.sample{
width: 400px;
}
/* ----------------- テキスト欄の高さ ・ピンク*/
.sample p{
margin:0px;
padding:0.5em 1em;
background-color: #ffddff;
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="kadobottom"><span class="kado4"></span>
<span class="kado3"></span>
<span class="kado2"></span>
<span class="kado1"></span>
</div>
</div>