【CSS】多重線のBOXを描いてみます

たまにデザイナーさんが難しい装飾のBOXデザインを出してきたりしますよね。多重線だったり、２重線だけど極端に線の太さが違っていたり。

普通の枠線だったら、
　単線なら border: 2px solid #f00;
　二重線なら border: 3px double #f00;
というふうにすればCSSで簡単に描けるんですが、あまりにもデザインチックな多重線のBOXデザインを持ってこられたら、結構厳しいものがありました。

それを解決するには…

box-shadow（inset）

 ​を使用すれば、簡単に多重線を描くことが可能です！

とりあえず、サンプルを見てください。
https://revenue-test.biz/test_html/multiplet.html

サンプルを見ればわかるかと思いますが、

    box-shadow: #fff 0 0 0 1px inset,
               #999 0 0 0 2px inset,
               #fff 0 0 0 3px inset,
               #999 0 0 0 4px inset,
               #fff 0 0 0 5px inset,
               #999 0 0 0 6px inset,
               #fff 0 0 0 7px inset,
               #999 0 0 0 8px inset,
               #fff 0 0 0 11px inset,
               #48d 0 0 0 13px inset;

こんな感じでカンマ区切りで線を描くことによって、多重の線を描くことができます。

もちろん、inset を付けない影の部分を付与すれば、多重線の影付きBOXを描くことも可能です。

    box-shadow: #fff 0 0 0 1px inset,
               #999 0 0 0 2px inset,
               #fff 0 0 0 3px inset,
               #999 0 0 0 4px inset,
               #fff 0 0 0 5px inset,
               #999 0 0 0 6px inset,
               #fff 0 0 0 7px inset,
               #999 0 0 0 8px inset,
               #fff 0 0 0 11px inset,
               #48d 0 0 0 13px inset,
               rgba(0,0,0,0.7) 3px 3px 8px;

上記の最後の一行が影の部分になりますね。

※余談ですが、以前はこの多重線を描くと、Firefox と chrome で見え方が違っていたんですが、今は同じになりましたね。
ああ、同じエンジンになっちゃったんだなあ…とこんなところの見栄えで感じ入ってしまう出来事でした。