おしゃれな囲み枠 その６ シック

今回はシックな囲み枠を作ってみたいと思います。

参考にした記事はこちら。

www.sapporo-sfc.xyz

ステッチ風シックな囲み枠

<div style="margin: 15px 5px; padding: 10px; color: #333333; background: #dfdfdf; box-shadow: 0 0 0 5px #dfdfdf; border: dashed 2px #fefefe;">ここに本文</div>

ここに本文

<div style="margin: 15px 5px; padding: 10px; color: #333333; background: #dfdfdf; box-shadow: 0 0 0 5px #dfdfdf; border: dashed 2px #565656;">ここに本文</div>

ここに本文

<div style="margin: 15px 5px; padding: 10px; color: #333333; background: #373737; box-shadow: 0 0 0 5px #373737; border: dashed 2px #d8bfd8;">
<p style="margin: 5; color: #fafafa; font-weight: bold;">ここに本文</p>
</div>

ここに本文

２重線シックな囲み枠

<div style="margin: 15px 5px; padding: 10px; color: #333333; background: #dfdfdf; box-shadow: 0 0 0 5px #dfdfdf; border: double 5px #fefefe;">ここに本文</div>

ここに本文

<div style="margin: 15px 5px; padding: 10px; color: #333333; background: #393939; box-shadow: 0 0 0 5px #393939; border: double 5px #fefefe;">
<p style="margin: 5; color: #fafafa;">ここに本文</p>
</div>

ここに本文

単線のシックな囲み枠

<div style="margin: 15px 5px; padding: 10px; color: #333333; background: #dfdfdf; box-shadow: 0 0 0 5px #dfdfdf; border: solid 3px #fefefe;">ここに本文</div>

ここに本文

<div style="margin: 15px 5px; padding: 10px; color: #333333; background: #dfdfdf; box-shadow: 0 0 0 5px #dfdfdf; border: solid 3px #abb1b5;">ここに本文</div>

ここに本文

落ち着いた雰囲気になりますね！