1. 首頁
  2. 問答
  3. CSS：如何爲這樣的字段蒙上陰影？

CSS：如何爲這樣的字段蒙上陰影？

2013-02-11 65 views
-1

我正在嘗試設置文本輸入字段的樣式。到目前爲止，我試圖使用邊框和圖像作爲背景，但這不是一個可擴展的解決方案。我如何設計類似下圖中的輸入字段？CSS：如何爲這樣的字段蒙上陰影？

enter image description here

來源

2013-02-11 Andrew

+1

[這]（http://www.css3.info/preview/box-shadow/）將幫助你 – 2013-02-11 13:52:57

+1

你嘗試過什麼到目前爲止？完成任何研究？看看爲邊框使用漸變以及內部的'box-shadow'。 – 2013-02-11 13:53:51

+0

http://stackoverflow.com/questions/11361075/responsive-input-fields-in-css-fluid-width - 可能重複 – 2013-02-11 13:55:05

回答

3

使用CSS3 box-shadow財產。例如：

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

來源

2013-02-11 13:54:03 Morpheus

1

同意@Morpheus。 您也可以同時使用2個陰影：

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

來源

2013-02-11 14:08:29 AnilkaBobo

相關問題

 相關問題