Html/CSS前端如何實現文字邊框陰影

上次我們聊了《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，獲取更多詳細 
下次逛網頁的時候記得留意邊框陰影的效果,並且手動去實現一下吧,畢竟實踐出真知^.^