前兩天有一個(gè)學(xué)html5前端小美女問(wèn)我一個(gè)有關(guān)文字陰影的效果怎么去實(shí)現(xiàn)。她和我說(shuō)文字陰影嘛,她也知道text-shadow,.但是卻做不出想要的樣子,其實(shí)css3的新功能是很強(qiáng)大的,不要把你的思想太過(guò)于局限化,好了,閑話也不多說(shuō),咱們就先來(lái)看看這個(gè)文本陰影.

一.文字陰影

text-shadow 文字陰影參數(shù): 參數(shù)1 : 第1個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影水平偏移值?？梢詾樨?fù)值 參數(shù)2 ：第2個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影垂直偏移值。可以為負(fù)值 參數(shù)3 ：如果提供了第3個(gè)長(zhǎng)度值則用來(lái)設(shè)置對(duì)象的陰影模糊值。不允許負(fù)值參數(shù)4 ： 設(shè)置對(duì)象的陰影的顏色

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

二.實(shí)例

上圖的效果我們?cè)鯓觼?lái)實(shí)現(xiàn)呢?  

HTML結(jié)構(gòu) CSS樣式字體樣式字體顏色文本陰影 那我們來(lái)看一下具體代碼:

HTML:  

<div class="text">【千錘百煉】尚學(xué)堂</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;*/
}

現(xiàn)在我們來(lái)看看前端小美女問(wèn)我的效果該怎么做..

其實(shí)非常簡(jiǎn)單了,我們來(lái)直接上代碼~

HTML:

<div class="text">【千錘百煉】尚學(xué)堂</div>    

CSS:  

body {
    background: #000;
    color: #fff;
}
.text{
    font: bold 100px/1.5 georgia, sans-serif;
/*不同顏色的,多個(gè)不同值的模糊大小*/
    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;
} 

發(fā)散你的思維,其實(shí)css3樣式非常有趣,有時(shí)候往往是一點(diǎn)點(diǎn)改變,就可以實(shí)現(xiàn)很炫的效果^.^  

總結(jié)

以上所述是小編給大家介紹的使用Html5、CSS實(shí)現(xiàn)文字陰影效，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！