Html/CSS前端實現文字邊框陰影製作效果執行個體分享

在開發中現在對於陰影製作效果的使用已經越來越廣泛了,那麼今天我們就來說一說用同樣的手法實現邊框陰影。下面指令碼之家小編給大家帶來了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;}