您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS3的文字陰影—text-shadow用法
CSS3的文字陰影—text-shadow用法
文章來源：365jz.com 點擊數(shù)：605 更新時間：2017-12-21 11:12 參與評論
text-shadow還沒有出現(xiàn)時，大家在網(wǎng)頁設(shè)計中陰影一般都是用photoshop做成圖片，現(xiàn)在有了css3可以直接使用text-shadow屬性來指定陰影。這個屬性可以有兩個作用，產(chǎn)生陰影和模糊主體。這樣在不使用圖片時能給文字增加質(zhì)感。
text-shadow曾經(jīng)在css2中就出現(xiàn)過，但在css2.1版本中又被拋棄了，現(xiàn)在css3.0版本又重新?lián)旎貋砹?。這說明text-shadow這個屬性非常值得我們做前端的人員重視?，F(xiàn)在很多項目中，css3有很多屬性被前端工程師們使用了，我在前面也分別介紹過css3中的漸變，透明度，圓角三個屬性的使用，而且css3這么多屬性中，我個人覺得text-shadow運用得是最多的一個屬性，作為我們前端人員我覺得有必要學(xué)習(xí)并掌握這個text-shadow屬性。
text-shadow曾經(jīng)在css2中就出現(xiàn)過，但在css2.1版本中又被拋棄了，現(xiàn)在css3.0版本又重新?lián)旎貋砹?。這說明text-shadow這個屬性非常值得我們做前端的人員重視?，F(xiàn)在很多項目中，css3有很多屬性被前端工程師們使用了，我在前面也分別介紹過css3中的漸變，透明度，圓角三個屬性的使用，而且css3這么多屬性中，我個人覺得text-shadow運用得是最多的一個屬性，作為我們前端人員我覺得有必要學(xué)習(xí)并掌握這個text-shadow屬性。
CSS3 text-shadow是什么？
text-shadow的含義是：文本的陰影，給文本添加陰影效果
CSS3 text-shadow書寫格式：
text-shadow:apx bpx cpx #color；
其中a指X軸上的位移，b指Y軸上的位移，c指陰影的寬度，color指陰影的顏色值；a、b可為負(fù)，c不能為負(fù)。
下面我們來簡單的演示兩個實例說明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的一個小技巧罷了，也許你可以創(chuàng)建更好的效果，這里就不一一列舉了！
text-shadow:2px 2px 2px #fff
X軸，Y軸，模糊程度(不可是負(fù)值)，陰影顏色
效果一：
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);
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答！！ 點擊進(jìn)入論壇
您可能感興趣的文章:
------分隔線----------------------------
