一.邊框陰影

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;}

總結

以上所述是小編給大家介紹的Html/CSS前端實現文字邊框陰影效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！