首先我先拋出制作這個搜索框的細節：
1）文本輸入框要有內陰影。
2）文本框與按鈕要對齊。
好，我們現在開始制作，先說一下，最直接的制作方法，文本輸入框的內陰影我們可以用圖片來做，用幾像素的圖片平鋪，然后一個DIV層內包含input與button兩個標簽，大致HTML標簽書寫如：
<div id="search-field"><form id="search-form"> <input type="text" /> <button type="submit">谷歌搜索</button></form></div>
這樣寫雖然實現了想要的效果，但是我們會發現，在IE瀏覽器下，input與button始終會有1像素的錯位，如圖：
如果我們要達到滿意的效果，就要用到各IE瀏覽器的hack，造成我們將來維護成本的加大，并且，如果陰影用圖片的話，像這樣的小圖會越來越多，如果用CSS3來實現內陰影，我們的PM肯定會跑來和我們說，你看瀏覽器的表現不一致，有的有陰影，有的沒有，你要是說我們只有高瀏覽器支持陰影，低版本瀏覽器不支持陰影，我們的PM會說，我們要的是全瀏覽器保持一致，坑爹呀，為什么就這么執著呢？不過要求嚴格，才能使我們進步嘛！
那我們就使用另一個方法來實現，首先，我們的文本框用一個DIV來模擬，然后將input的邊框與背景都設置為none，這樣就不會出現錯位的現象了；接著我們就來處理文本框的內陰影，我們用兩個DIV來控制，一般像這樣的陰影基本上2像素就能達到效果了，所以我們將X軸的DIV設置上border與下border，Y軸的DIV設置左border與右border，然后定位到用于模擬input的層內，一個完美的input框就制作完成了，陰影CSS代碼如下：
.search-field .shadow-x{ position:absolute; top:0; left:1px; width:438px; height:0; border-top:1px solid #d0d0d0; border-bottom:1px solid #f0f0f0; overflow:hidden; z-index:1;}.search-field .shadow-y{ position:absolute; top:0; left:0; width:0; height:30px; border-left:1px solid #d0d0d0; border-right:1px solid #f0f0f0; overflow:hidden;}陰影HTML代碼如下：
<div id="search-field"><form id="search-form"><div class="search-input"> <div class="shadow-x"></div> <div class="shadow-y"></div> <input type="text" /></div><button type="submit">谷歌搜索</button></div>
完成后，這個搜索框在視覺上與我們想要的效果一般無二。（來源）
