css - 複数のボーダーとドロップ シャドウを含むボタンを作成することはできますか?

Question

これは、CSSで作成しようとしているボタンです

_{（出典：gyazo.com）}

灰色の背景を無視する

中央をトリミングして、上、左、右に境界線を追加しようとしましたが、それでも奇妙に見えます。CSSだけで作成する方法についてのアイデアはありますか?

白いドロップ シャドウ、ライブ プレビューがあります: http://justxp.plutohost.net/themetheory/portfolio.html

それは可能ですか？

ありがとうございました。

Answer 1

疑似クラスを使用して、目的の結果を複数の境界線で実現できます。デモを参照してください:-before: after:

デモ

HTML

<div id="borders"></div>

CSS

#borders {
   position: relative;
   border: 5px solid #f00;
   width:100px;
   height:100px;
}
#borders:before {
   content: " ";
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   border: 5px solid #ffea00;
}
#borders:after {
   content: " ";
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid green;
}

Answer 2

CSSTricks.com にブログ投稿があります - http://css-tricks.com/snippets/css/multiple-borders/