您好,登錄后才能下訂單哦!
這篇文章主要介紹Html5、CSS怎么實現(xiàn)文字陰影效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
前兩天有一個學html5前端小美女問我一個有關文字陰影的效果怎么去實現(xiàn)。她和我說文字陰影嘛,她也知道text-shadow,.但是卻做不出想要的樣子,其實css3的新功能是很強大的,不要把你的思想太過于局限化,好了,閑話也不多說,咱們就先來看看這個文本陰影.
一.文字陰影
text-shadow 文字陰影參數(shù): 參數(shù)1 : 第1個長度值用來設置對象的陰影水平偏移值??梢詾樨撝?參數(shù)2 :第2個長度值用來設置對象的陰影垂直偏移值??梢詾樨撝?參數(shù)3 :如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值參數(shù)4 : 設置對象的陰影的顏色
text-shadow: 10px 10px 50px #000;
二.實例
上圖的效果我們怎樣來實現(xiàn)呢?
HTML結構 CSS樣式字體樣式字體顏色文本陰影 那我們來看一下具體代碼:
HTML:
<p class="text">【千錘百煉】尚學堂</p>
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)在我們來看看前端小美女問我的效果該怎么做..
其實非常簡單了,我們來直接上代碼~
HTML:
<p class="text">【千錘百煉】尚學堂</p>
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; }
發(fā)散你的思維,其實css3樣式非常有趣,有時候往往是一點點改變,就可以實現(xiàn)很炫的效果^.^
以上是Html5、CSS怎么實現(xiàn)文字陰影效果的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。