シンプルな直線の囲い枠のバリエーションを作ってみます。
<div style="background: #fff; padding: 10px; border: 5px solid #c6c6c6;">本文を入れる</div>
このコードをHTML編集画面に貼り付けるとこうなります。
本文を入れる
「solid」の部分を変えて線を変えていきます。
「dashed」破線にすると
本文を入れる
「groove」立体的な谷型の線にすると
本文を入れる
「ridge」立体的な山型の線にすると
本文を入れる
「outset」囲まれた部分が浮きあがって見える立体的な線
本文を入れる
こんな感じになりました。
枠の色を変える場合は#c6c6c6の部分を変更します。
色はこちらから選びたい放題！
参考にナチュラルなカラーだとこんなのがあります。
#dfcba5
本文を入れる
#b9d0b1
本文を入れる
#e1c0b6
本文を入れる
くっきりしたいときはこんな感じのカラーもあります。
#956d30
本文を入れる
#234555
本文を入れる
#6b1d3b文
本文を入れる
枠線がくっきりしてるとちょっと目が疲れそう。
「dotted」点線くらいがちょうどいいかな？
本文を入れる
この本を参考にしています！
