CSS：如何遮蔽像这样的字段？

Question

我正在尝试设置文本输入字段的样式。到目前为止，我尝试使用边框和图像作为背景，但这不是一个可扩展的解决方案。我如何设置输入字段的样式，如下图所示？

Answer 1

使用CSS3 box-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;
}