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

角に花の付いた囲み枠、飾り枠

frame15-a
htmlとcssは共通
画像は使用するものを保存してください
違う色を組み合わせてもOKです
▼html/css/img▼
html
<div class="box15">
<div class="box-top">
<div class="u01"></div>
</div>
<div class="box-center">
ここに文字
</div>
<div class="box-bottom">
<div class="s01"></div>
</div>
</div>
css
.box15{
margin:1em 0; /* 中央寄せは0をautoに変更 */
width:80% /* 幅 */
}
.u01,.s01{
background:url(f-yoko.gif) repeat-x;
height:25px;
margin:0 32px
}
.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:25px
}
.box-center{
background-image:url(f-tate.gif), url(f-tate.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y;
padding:5px 32px
}
.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:25px
}
image






× close

frame15-b
frame15-c
frame15-d
frame15-e