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

<div class="s_box11">
ここに文字
</div>

.s_box11{
background:#f0f0f0;
border-radius:5px;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80%
}

.s_box11{
background:#ffd2da;
border-radius:5px;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80%
}

<div class="s_box12">
ここに文字
</div>

.s_box12 {
background:#fff;
border-radius:5px;
box-shadow:0 1px 5px #ccc;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80%
}

<div class="s_box13">
ここに文字
</div>

.s_box13 {
background:#f0f0f0;
border-radius:5px;
box-shadow:0 1px 5px #666;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}

<div class="s_box14">
ここに文字
</div>

.s_box14 {
background:#e2a8a9;
border:3px double #614a44;
border-radius:3px;
box-shadow:0 0 0 5px #e2a8a9,5px 5px 8px #000;
box-sizing:border-box;
color:#614a44;
margin:15px 0 25px;/* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}

.s_box14 {
background:#2b1408;
border:3px double #e2a8a9;
border-radius:3px;
box-shadow:0 0 0 5px #2b1408,5px 5px 8px #000;
box-sizing:border-box;
color:#e2a8a9;
margin:15px 0 25px; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}

<div class="s_box15">
ここに文字
</div>

.s_box15 {
background:#f0f0f0;
border:1px dashed #999;
box-shadow:0 0 0 5px #f0f0f0;
box-sizing:border-box;
margin:15px 0 25px; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}

.s_box15 {
background:#8c8673;
border:1px dashed #fff;
box-shadow:0 0 0 5px #8c8673;
box-sizing:border-box;
color:#fff;;
margin:15px 0 25px; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}

<div class="s_box16">
ここに文字
</div>

.s_box16 {
background:#f0f0f0;
border:1px dashed #999;
border-radius:10px;
box-shadow:0 0 0 5px #f0f0f0;
box-sizing:border-box;
margin:15px 0 25px; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}

.s_box16 {
background:#f3d0d0;
border:1px dashed #8c8673;
border-radius:10px;
box-shadow:0 0 0 5px #f3d0d0;
box-sizing:border-box;
margin:15px 0 25px; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:80% /* 幅 */
}