カテゴリー
未分類

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA