您現在的位置: 365建站網 > 365學習 > CSS3的文字陰影—text-shadow用法

CSS3的文字陰影—text-shadow用法

文章來源:365jz.com     點擊數:438    更新時間:2017-12-21 11:12   參與評論
text-shadow還沒有出現時,大家在網頁設計中陰影一般都是用photoshop做成圖片,現在有了CSS3可以直接使用text-shadow屬性來指定陰影。這個屬性可以有兩個作用,產生陰影和模糊主體。這樣在不使用圖片時能給文字增加質感。

text-shadow曾經在css2中就出現過,但在css2.1版本中又被拋棄了,現在CSS3.0版本又重新撿回來了。這說明text-shadow這個屬性非常值得我們做前端的人員重視?,F在很多項目中,css3有很多屬性被前端工程師們使用了,我在前面也分別介紹過css3中的漸變,透明度,圓角三個屬性的使用,而且css3這么多屬性中,我個人覺得text-shadow運用得是最多的一個屬性,作為我們前端人員我覺得有必要學習并掌握這個text-shadow屬性。

CSS3 text-shadow是什么?

text-shadow的含義是:文本的陰影,給文本添加陰影效果

CSS3 text-shadow書寫格式:

text-shadow:apx bpx cpx #color;

其中a指X軸上的位移,b指Y軸上的位移,c指陰影的寬度,color指陰影的顏色值;a、b可為負,c不能為負。

下面我們來簡單的演示兩個實例說明text-shadow的用法:

實例一:

.demo01{text-shadow:2px 2px 5px #305999}

實例二:

.demo02{background:#305999;text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff}

ok,通過實例二我們可以很簡單的給文字添加邊框,這只是 text-shadow的一個小技巧罷了,也許你可以創建更好的效果,這里就不一一列舉了!
 

text-shadow:2px 2px 2px #fff

X軸,Y軸,模糊程度(不可是負值),陰影顏色

 

效果一:

text-shadow: 0 0 20px red;

 

效果二:

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
 

效果三:

text-shadow: 0 1px 1px #fff;
 

效果四:

text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
 

效果五:

text-shadow: 0 0 5px #f96;
 
 

效果六:

text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;

效果七:

text-shadow: 1px 1px 0 #E4F1FF;


效果八:

text-shadow: 3px 3px 0 red,-3px 3px 0 red,3px -3px 0 red,-3px -3px 0 red;
 

效果九:

text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
 


效果十:

text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8);

效果十一:

text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;    /*注意:第一個陰影色和背景色相同;文本前景色和第二個陰影色相同*/
 
 

效果十二:

text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
 

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (438人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 四虎永久在线精品免费| 中文字幕精品无码一区二区三区| 一本加勒比hezyo高清| 在免费jizzjizz在线播放| 日本免费一二三区中文| 红怡院av男人的天堂久久| 天堂av色综合久久天堂| 亚洲欧洲另类春色小说| 秋霞电影网理论片韩国在线观看| 漂亮人妻当面被黑人玩弄| 精品偷拍偷窥在线视频| 欧美高潮抽搐喷水大叫| 国产超嫩一线天在线播放| 狠狠色噜噜狠狠狠狠97| 阿 啊 啊 好深啊 再深点| 五月丁香六月激情综合色| 精品熟女少妇av免费久久| 帝王受龙椅含玉势上朝| 欧美第一黄网免费网站| 亚洲国产精品电影人久久| 和老外交换太大了第二部分| 亚洲小说区图片区另类春色| 我的狗狗情人| 极品黑色丝袜自慰喷水第一集| 欧美另类69xxxxx| 老汉玩儿熄| 苍井空免费av片在线观看| 国产成人av大片大片在线播放| 国内处破女自拍| 久久亚洲男人第一av网站| linodeiphone孕妇视频| http://www.ecofarmsfoodcoops.com