Html/CSS前端實現(xiàn)文字邊框陰影效果
發(fā)布時間：2018-01-17 15:49:06 作者：佚名 
我要評論
我要評論在開發(fā)中現(xiàn)在對于陰影效果的使用已經(jīng)越來越廣泛了,那么今天我們就來說一說用同樣的手法實現(xiàn)邊框陰影。下面腳本之家小編給大家?guī)砹薍tml/CSS前端實現(xiàn)文字邊框陰影效果，需要的朋友參考下吧
一.邊框陰影
box-shadow 邊框陰影
參數(shù): 參數(shù)1 x-shadow：設置對象的陰影水平偏移值，單位可以是px、em或百分比等，允許負值。參數(shù)2 y-shadow：設置對象的陰影垂直偏移值，單位可以是px、em或百分比等，允許負值。參數(shù)3 blur：用于設置邊框陰影半徑大小。參數(shù)4 spread：擴展半徑，設置陰影的尺寸；這個參數(shù)可選，缺省時值為0。參數(shù)5 color：設置陰影的顏色。參數(shù)6 inset：這個參數(shù)默認不設置。默認情況下為外陰影，inset表示內(nèi)陰影。
box-shadow：x-shadow y-shadow blur spread color inset;
二.實例
效果1
效果二
上圖的效果我們怎樣來實現(xiàn)呢?
HTML結(jié)構(gòu) 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;
}
總結(jié)
以上所述是小編給大家介紹的Html/CSS前端實現(xiàn)文字邊框陰影效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了使用Html5、CSS實現(xiàn)文字陰影效果的相關資料,需要的朋友可以參考下2018-01-17- 這是一款由腳本之家翻譯自國外網(wǎng)站的在線CSS工具，可通過拖拽來調(diào)整生成盒子模型陰影效果的水平與垂直長度、模糊半徑、擴散半徑、不透明度等屬性，還可自由選擇陰影色、盒2017-09-19
css box-shadow實現(xiàn)曲邊陰影與翹邊陰影
這篇文章主要介紹了css box-shadow實現(xiàn)曲邊陰影與翹邊陰影,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-05
css3 box-shadow陰影(外陰影與外發(fā)光)圖示講解
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發(fā)光)，通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11
純css3使用transform屬性控制文字變形3D陰影效果源碼
這是一款基于純css3使用transform屬性控制文字變形3D陰影效果源碼。界面上的文字呈現(xiàn)出多層陰影漸變層疊出現(xiàn)的展示效果。主要通過css3的transform屬性實現(xiàn)。2017-06-09詳解CSS3陰影 box-shadow的使用和技巧總結(jié)
這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結(jié) ,具有一定的參考價值，有需要的可以了解一下。2016-12-03- 下面小編就為大家?guī)硪黄?分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-15
css3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例
下面小編就為大家?guī)硪黄猚ss3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-10
css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果
這篇文章主要介紹了css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-22
