フリー素材｜画像を使用しない囲み枠、飾り枠-03

掲示板風の囲み枠、飾り枠

色や大きさはお好みで設定してください
s_box21
▼html/css▼
html
<div class="s_box21">
ここに文字
</div>
css
.s_box21{
background:#4c6600;
border:2px solid #513d00;
box-shadow:0 0 0 8px #664c00;
box-sizing:border-box;
color:#fff;
margin:26px 0; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}
css(s_box21-b)
.s_box21{
background:#a48c46;
border:2px solid #513d00;
box-shadow:0 0 0 8px #664c00;
box-sizing:border-box;
color:#fff;
margin:26px 0; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}
× close
s_box21-b
s_box22
▼html/css▼
html
<div class="s_box22">
ここに文字
</div>
css
.s_box22 {
background:#4c6600;
border:2px solid #513d00;
border-radius:2px;
box-shadow:0 0 0 8px #664c00;
box-sizing:border-box;
color:#fff;
margin:26px 0; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}
css(s_box22-b)
.s_box22{
background:#a48c46;
border:2px solid #513d00;
border-radius:2px;
box-shadow:0 0 0 8px #664c00;
box-sizing:border-box;
color:#fff;
margin:26px 0; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}
× close
s_box22-b
s_box23
▼html/css▼
html
<div class="s_box23">
<div class="box-inner">
ここに文字
</div>
</div>
css
.s_box23{
border:solid 1px #000;
background:#eae0cc;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:10px;
width:80%
}
.box-inner{
border:solid 1px #000;
background:#fff;
padding:.5em;
}
× close
WEB拍手