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; 
}