酷炫,用Html5/CSS实现文字阴影
前兩天有一個(gè)學(xué)html5前端小美女問我一個(gè)有關(guān)文字陰影的效果怎么去實(shí)現(xiàn)。她和我說文字陰影嘛,她也知道text-shadow,.但是卻做不出想要的樣子,其實(shí)css3的新功能是很強(qiáng)大的,不要把你的思想太過于局限化,好了,閑話也不多說,咱們就先來看看這個(gè)文本陰影.
一.文字陰影
text-shadow 文字陰影
參數(shù):
參數(shù)1 : 第1個(gè)長度值用來設(shè)置對(duì)象的陰影水平偏移值??梢詾樨?fù)值?
參數(shù)2 :第2個(gè)長度值用來設(shè)置對(duì)象的陰影垂直偏移值??梢詾樨?fù)值?
參數(shù)3 :如果提供了第3個(gè)長度值則用來設(shè)置對(duì)象的陰影模糊值。不允許負(fù)值
參數(shù)4 : 設(shè)置對(duì)象的陰影的顏色
text-shadow: 10px 10px 50px #000;?
二.實(shí)例
上圖的效果我們?cè)鯓觼韺?shí)現(xiàn)呢?
HTML結(jié)構(gòu)
CSS樣式
字體樣式
字體顏色
文本陰影 那我們來看一下具體代碼:
HTML:
現(xiàn)在我們來看看前端小美女問我的效果該怎么做..
?
其實(shí)非常簡(jiǎn)單了,我們來直接上代碼~
HTML:
發(fā)散你的思維,其實(shí)css3樣式非常有趣,有時(shí)候往往是一點(diǎn)點(diǎn)改變,就可以實(shí)現(xiàn)很炫的效果^.^
下一篇文章,我們?cè)僦v述同樣的技術(shù)手法實(shí)現(xiàn)文字邊框陰影。請(qǐng)期待
?
總結(jié)
以上是生活随笔為你收集整理的酷炫,用Html5/CSS实现文字阴影的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 如何隐藏 video 元素的下载按钮
- 下一篇: CSS中的overflow属性