使用box-shadow（插圖）的CSS3文本字段效果？

Question

我想用CSS3這樣得到一個文本框的效果： -

我試過用CSS3，但還沒有成功地得到完全相同的外觀做的，請找我的代碼在這裏jsfiddle.net

CSS

.field { 
-webkit-box-shadow: inset 0px 1px 4px 1px #929292; 
-moz-box-shadow: inset 0px 1px 4px 1px #929292; 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset; 
width: 277px; 
height: 18px; 
border-top: #9f9e9e 1px solid; 
border-right: #c9c9c9 1px solid; 
border-bottom: #ececec 1px solid; 
border-left: #c9c9c9 1px solid; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
outline: none; 
padding: 6px 8px; 
font-size: 13px; 
line-height: 16px; 
color: #333; 
} 

HTML

<input type="text" name="name" value="" class="field"> 

在此先感謝。

Answer 1

很難定義「完全一樣的外觀」。無論如何，這是我的嘗試：

updated demo

我已經改變箱陰影，並給它一個第二影子

box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3), 
      inset 0px -1px 1px 1px rgba(0, 0, 0, 0.2); 

這裏的關鍵問題是，你可以設置儘可能多的陰影如你想，即使是同一種（我的意思是「插入」）。這樣，你幾乎可以得到你想要的任何東西。甚至更多，如果你在顏色中使用alpha。

順便說一下，我認爲你可以放下-webkit-border-radius。