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