首先我先拋出制作這個搜索框的細節(jié)：
1）文本輸入框要有內(nèi)陰影。
2）文本框與按鈕要對齊。
好，我們現(xiàn)在開始制作，先說一下，最直接的制作方法，文本輸入框的內(nèi)陰影我們可以用圖片來做，用幾像素的圖片平鋪，然后一個DIV層內(nèi)包含input與button兩個標簽，大致HTML標簽書寫如：
<div id="search-field">
<form id="search-form">
<input type="text" />
<button type="submit">谷歌搜索</button>
</form>
</div>
這樣寫雖然實現(xiàn)了想要的效果，但是我們會發(fā)現(xiàn)，在IE瀏覽器下，input與button始終會有1像素的錯位，如圖：
如果我們要達到滿意的效果，就要用到各IE瀏覽器的hack，造成我們將來維護成本的加大，并且，如果陰影用圖片的話，像這樣的小圖會越來越多，如果用CSS3來實現(xiàn)內(nèi)陰影，我們的PM肯定會跑來和我們說，你看瀏覽器的表現(xiàn)不一致，有的有陰影，有的沒有，你要是說我們只有高瀏覽器支持陰影，低版本瀏覽器不支持陰影，我們的PM會說，我們要的是全瀏覽器保持一致，坑爹呀，為什么就這么執(zhí)著呢？不過要求嚴格，才能使我們進步嘛！
那我們就使用另一個方法來實現(xiàn)，首先，我們的文本框用一個DIV來模擬，然后將input的邊框與背景都設(shè)置為none，這樣就不會出現(xiàn)錯位的現(xiàn)象了；接著我們就來處理文本框的內(nèi)陰影，我們用兩個DIV來控制，一般像這樣的陰影基本上2像素就能達到效果了，所以我們將X軸的DIV設(shè)置上border與下border，Y軸的DIV設(shè)置左border與右border，然后定位到用于模擬input的層內(nèi)，一個完美的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>
完成后，這個搜索框在視覺上與我們想要的效果一般無二。
