上次我們聊了《Html5前端如何實現文字陰影》,其實在開發中現在對於陰影效果的使用已經越來越廣泛了,那麼今天我們就來說一說用同樣的手法實現邊框陰影。 一.邊框陰影box-shadow 邊框陰影參數:參數1 x-shadow：設置對象的陰影水平偏移值，單位可以是px、em或百分比等，允許負值。參數2 ...
上次我們聊了《Html5前端如何實現文字陰影》,其實在開發中現在對於陰影效果的使用已經越來越廣泛了,那麼今天我們就來說一說用同樣的手法實現邊框陰影。
一.邊框陰影
box-shadow 邊框陰影
參數:
參數1 x-shadow：設置對象的陰影水平偏移值，單位可以是px、em或百分比等，允許負值。
參數2 y-shadow：設置對象的陰影垂直偏移值，單位可以是px、em或百分比等，允許負值。
參數3 blur：用於設置邊框陰影半徑大小。
參數4 spread：擴展半徑，設置陰影的尺寸；這個參數可選，預設時值為0。
參數5 color：設置陰影的顏色。
參數6 inset：這個參數預設不設置。預設情況下為外陰影，inset表示內陰影。
box-shadow：x-shadow y-shadow blur spread color inset;
二.實例
效果1
效果二
上圖的效果我們怎樣來實現呢?
HTML結構
CSS樣式
字體樣式
字體顏色
邊框陰影 那我們來看一下具體代碼:
HTML:
<div class="box">box-shadow</div> CSS:
.box{
width:300px;
height:150px;
background: deepskyblue;
font:30px/150px 'Microsoft YaHei';
color: #fff;
font-weight: bold;
text-align: center;
margin:100px auto;
/*邊框陰影*/
/*效果1*/
box-shadow: inset 5px 5px 20px #ccc;
/*效果2*/
box-shadow: inset 5px 5px 20px pink,5px 5px 20px #000;
}
上海尚學堂java薇芯 java8733，獲取更多詳細
下次逛網頁的時候記得留意邊框陰影的效果,並且手動去實現一下吧,畢竟實踐出真知^.^
