css - CSS：このようなフィールドをシャドウする方法は？

Question

テキスト入力フィールドのスタイルを設定しようとしています。これまで、背景として境界線と画像を使用しようとしましたが、それはスケーラブルなソリューションではありません。下の画像のような入力フィールドのスタイルを設定するにはどうすればよいですか？

Answer 1

CSS3box-shadowプロパティを使用します。例：

input[type=text] {
    box-shadow: inset 2px 2px 2px 2px black;
}

Answer 2

@Morpheusに同意します。また、同時に 2 つのシャドウを使用できます。

input[type=text] {
    box-shadow: inset 0 2px 2px 2px #000, inset 0 -2px 2px 2px #fff;
}