前兩天有一個學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 #000,-10px -10px 50px #f00;*/ }

　　

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

?

其實非常簡單了,我們來直接上代碼~
HTML:

<div class="text">【千錘百煉】尚學堂div> CSS: body {background: #000;color: #fff; } .text{font: bold 100px/1.5 georgia, sans-serif; /*不同顏色的,多個不同值的模糊大小*/text-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实现文字阴影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。