しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

CSS で囲み枠を装飾する

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

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

まずは破線

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

スポンサードリンク

HTML は前回とほぼ変わらず

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

CSSborderdashed を下記のように指定するだけ

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

次に二重線

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

CSSborderdouble を指定するだけ

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

左側だけ枠線

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

CSSborderborder-left を変更するだけ

上下左右はそれぞれ border-topborder-bottomborder-leftborder-right で指定できるようです

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

最後にドロップシャドウ

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

CSSbox-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 だけでもいろいろできそうですね

スポンサードリンク