背景：之前做項目中的一個移動端頁面，關於在搜索框中輸入信息查找對應的照片。改了幾次ui圖之後，最終的搜索框的設計圖如下：

開始做頁面的時候，就想到了用box-shadow 來實現外陰影邊框、用border-radius來實現ui圖的中的圓角。但是過程中也沒有那麽順利，基本效果是實現了，可是那個搜索按鈕總是和搜索框存在一點縫隙，特別是在ipad和iphone設備中更是明顯，於是就通過瀏覽器的檢查工具檢查元素，最終發現是input（搜索框）元素的固有樣式：padding：1px在作祟，導致布局不理想。

最終修改後的搜索框部分頁面代碼和效果圖如下（搜索按鈕絕對布局）：

html：

<div class="content search-box">

<input class="input-number" id="input-number" value="" placeholder="輸入參賽號或跑團名稱查看照片"/>

<div class="search" id="search" >搜索</div>

</div>

css：

.picture .search-box{

width: 7.1rem;

height: auto;

position: relative;

border: none;

}

.picture .input-number{

display: block;

width: 6.1rem;

height: 0.72rem;

border: none;

border-radius: 0.4rem 0 0.4rem 0;

padding: 0;

padding-left: 1rem;

font-size: 0.2rem;

background: url(../img/search.png) no-repeat;

background-size: 0.32rem 0.32rem;

background-position: 0.4rem 0.2rem;

box-shadow: 0 0 0.1rem #c2c2c2;

}

.picture #search{

display: block;

position: absolute;

width: 1.35rem;

height: 0.72rem;

border-radius: 0.4rem 0 0.4rem 0;

right: 0;

bottom: 0;

background: #1c1c20;

text-align: center;

line-height: 0.72rem;

color: #fff;

}

效果圖：

總結：關於input、 button等布局以及box-shadow樣式實例如下：

代碼：

html：

<div>

body{

margin: 100px;

padding: 30px;

}

</div>

橙色為div

<div class="outer">

<div class="inner" >div display:block</div>

<button class="button">tag:button</button>

</div>

橙色為input

<div class="outer">

<input class="inner" value="input display:inline-block"/>

<!-- <div class="button" ></div> -->

<input class="button" value="input button"/>

</div>

橙色為input

<div class="outer">

<input class="inner" value="input display:inline-block"/>

<!-- <div class="button" ></div> -->

<div class="button" >div</div>

</div>

css：

body{

margin: 100px;

padding: 30px;

}

.outer{

width: 300px;

height: 100px;

border: 10px solid #ccc;

padding: 0;

margin-bottom:50px;

position: relative;

-webkit-box-shadow: 0 0 50px 10px pink;

-moz-box-shadow: 0 0 50px 10px pink;

box-shadow: 0 0 50px 10px pink;

}

.inner{

width: 300px;

height: 100px;

margin: 0 auto;

background: #f69f69;

-webkit-box-shadow: 0 0 50px green;

-moz-box-shadow: 0 0 50px green;

box-shadow: 0 0 50px green;

border: none;

padding: 0;

border: 0px red solid;

}

從例子中可以看出，box-shadow是不占用盒模型的空間的，是屬於盒子的陰影，在副父元素overflow的屬性下會被截斷。

語法

box-shadow: h-shadow v-shadow blur spread color inset；

陰影顏色：此參數可選，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。

Box-shadow的瀏覽器支持情況

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。

我們在書寫box-shadow的格式應該這樣

//Firefox4.0-
-moz-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;

部分內容轉載自：

原文: https://www.w3cplus.com/content/css3-box-shadow ? w3cplus.com

Box-shadow制作漂亮的外陰影輸入框