フリー素材|囲み枠、飾り枠-22

フリルの囲み枠、飾り枠

frame22-a
htmlとcssは背景色以外共通
画像は使用するものを保存してください
▼html/css/img▼
html
<div class="box22">
<div class="box-top">
<div class="u01"></div>
</div>
<div class="box-center">
<div class="box-inner">
ここに文字
</div>
</div>
<div class="box-bottom">
<div class="s01"></div>
</div>
</div>
css
.box22 {
margin:1em 0; /* 中央寄せは0をautoに変更 */
width:80% /* 幅 */
}
.u01 {
background:url(f-ue.gif) repeat-x;
height:18px;
margin:0 18px 0 19px
}
.s01 {
background:url(f-sita.gif) repeat-x;
height:19px;
margin:0 18px 0 19px
}
.box-top {
background-image:url(f-kado1.gif), url(f-kado2.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:18px
}
.box-center {
background-image:url(f-migi.gif), url(f-hidari.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y
}
.box-inner {
background:#fff;
margin:0 18px 0 19px
}
.box-bottom {
background-image:url(f-kado3.gif), url(f-kado4.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:19px
}
image

【frame22-a】background:#fff;

【frame22-b】background:#ccb3a1;

【frame22-c】background:#ffd6da;
× close

frame22-b
frame22-c