CSS で囲み枠を装飾する

CSS で囲み枠をもう少し装飾してみたい

・・・というわけでいろいろ試してみます

まずは破線

ねこはどうして箱に入るのが好きなのか？

HTML は前回とほぼ変わらず

<div class="box">
    <p>ねこはどうして箱に入るのが好きなのか？</p>
</div>

CSS は border に dashed を下記のように指定するだけ

.box {
    padding: 0.25em 1.25em;
    margin: 2em 0;
    color: #4866cc;
    background: #f0f8ff;
    border: dashed 3px #6688dd;
}

次に二重線

ねこはどうして箱に入るのが好きなのか？

CSS の border に double を指定するだけ

.box {
    padding: 0 1em;
    margin: 2em 0;
    color: #4866cc;
    background: #f0f8ff;
    border: double 8px #6688dd;
}

左側だけ枠線

ねこはどうして箱に入るのが好きなのか？

CSS の border を border-left を変更するだけ

上下左右はそれぞれ border-top、border-bottom、border-left、border-right で指定できるようです

.box {
    padding: 0.25em 1.25em;
    margin: 2em 0;
    color: #338866;
    background: #f0fff0;
    border-left: solid 16px #66dd88;
}

最後にドロップシャドウ

ねこはどうして箱に入るのが好きなのか？

CSS に box-shadow を追加するだけ

.box {
    padding: 0.25em 1.25em;
    margin: 2em 0;
    color: #888833;
    background: #fff8f0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}

第1、2 引数は影をずらす横幅と縦幅、第3引数はフェードする幅、第4引数は透明度を含む影の色を指定するようです

CSS だけでもいろいろできそうですね