使用Html5、CSS實現文字陰影效果

前兩天有一個學html5前端小美女問我一個有關文字陰影的效果怎麼去實現。她和我說文字陰影嘛,她也知道text-shadow,.但是卻做不出想要的樣子,其實css3的新功能是很強大的,不要把你的思想太過於局限化,好了,閒話也不多說,咱們就先來看看這個文本陰影.

text-shadow 文字陰影參數: 參數1 : 第1個長度值用來設定物件的陰影水平偏移值。可以為負值參數2 ：第2個長度值用來設定物件的陰影垂直偏移值。可以為負值參數3 ：如果提供了第3個長度值則用來設定物件的陰影模糊值。不允許負值參數4 ： 設定物件的陰影的顏色

text-shadow: 10px 10px 50px #000;

上圖的效果我們怎麼來實現呢?

HTML結構CSS樣式字體樣式字體顏色文字陰影那我們來看一下具體程式碼:

HTML:

 <div class=text>【千錘百煉】尚學堂</div>

CSS:

 .text{ font: bold 100px/1.5 '微軟雅黑'; color: dodgerblue;/*文字陰影*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000x -px 10px 50px #f00;*/}

現在我們來看看前端小美女問我的效果該怎麼做..

其實非常簡單了,我們來直接上程式碼~

HTML:

 <div class=text>【千錘百煉】尚學堂</div>

CSS:

 body { background: #000; color: #fff;}.text{ font: bold 100px/1.5 georgia, sans-serif;/*不同顏色的,多個不同值的模糊大小*/ t​​ext-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

發散你的思維,其實css3樣式非常有趣,有時候往往是一點點改變,就可以實現很炫的效果^.^

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