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

2枚重ねの囲み枠、飾り枠

frame01-a
htmlとcssは共通
画像は使用するものを保存してください
別の画像を使用してもOKです
▼html/css/img▼
html
<div class="box01">
<div class="box-inner">
ここに文字
</div>
</div>
css
.box01{
background:url(back01.gif);
box-shadow:0 1px 3px #000; /* 影 */
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:20px;
width:80% /* 幅 */
}
.box-inner{
background:url(back02.gif);
box-shadow:0 1px 3px #000; /* 影 */
padding:20px
}
image

× close

frame01-b
frame01-c
frame01-d
frame01-e

カスタマイズサンプル

影なしサンプル
cssのbox-shadowを削除
角に丸み
cssにborder-radius:5pxを追加