在開發中現在對於陰影效果的使用已經越來越廣泛了,那麼今天我們就來說一說用同樣的手法實現邊框陰影。下面腳本之家小編為大家帶來了Html/CSS前端實現文字邊框陰影效果，需要的朋友參考下吧，希望能幫助大家。
一.邊框陰影
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:
<p class="box">box-shadow</p>
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;
}相關推薦：
使用CSS3的box-shadow屬性製作邊框陰影效果的方法
css3圓角邊框，邊框陰影_html/css_WEB-ITnose
css實作邊框陰影效果_html/css_WEB- ITnose
#以上是Html/CSS前端實作文字邊框陰影效果實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
