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

相關推薦：

使用CSS3的box-shadow屬性製作邊框陰影效果的方法

css3圓角邊框，邊框陰影_html/css_WEB-ITnose

css實作邊框陰影效果_html/css_WEB- ITnose

#

以上是Html/CSS前端實作文字邊框陰影效果實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！