塩焼きブログ

塩焼きに関しての研究内容を公開しています

CSSのみで二重線ボックスを実装する

f:id:hoge:20150419213303p:plain

CSSだけで二重線のボックスが作れるらしいと聞いていたが、実際にやってみたら本当に簡単だった。

<div class="test">Test Box</div>

box-shadowが肝っぽい

.test {
    margin: 20px;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #fff inset;
    background: #000;
    color: #fff;
}

すぐ確認できるファイルをGistで公開しておいた

gist.github.com