CSS中的text-shadow。
text-shadow（文字投影），box-shadow（容器投影），border-radius（圓角）這三個(gè)屬性估計(jì)以后用的比較多，記錄 一下。目前不支持IE系列（不過可以使用其他方法實(shí)現(xiàn)，下文有詳細(xì)介紹），無語的IE系，只支持Firefox和chrome。
?
?一、除IE之外的text-shadow
Text Shadow ：文本的陰影，給文本添加陰影效果
文字陰影的結(jié)構(gòu)順序?yàn)?#xff1a;x 軸偏移，y 軸偏移，模糊，顏色。
設(shè)置一個(gè)負(fù)值的 x 軸偏移將陰影轉(zhuǎn)移到左側(cè)。設(shè)置一個(gè)負(fù)值的 y 軸偏移轉(zhuǎn)將陰影轉(zhuǎn)移到頂部。別忘了，你可以在陰影顏色中應(yīng)用 RGBA 值。
書寫格式：text-shadow:apx bpx cpx #color；
其中a指X軸上的位移，b指Y軸上的位移，c指陰影的寬度，color指陰影的顏色值；a、b可為負(fù)，c不能為負(fù)。
下面我們來簡單的演示兩個(gè)實(shí)例說明text-shadow的用法：
實(shí)例一（一種陰影）：
.demo01{text-shadow:2px 2px 5px #305999}
實(shí)例二（多種陰影）：
.demo02{background:#305999;text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff}
text-shadow效果：
? 效果是不錯(cuò)，可是讓我們頭痛的是IE是不支持text-shadow效果，但為了在兼容這一問題，我們只好使用濾鏡filter:shadow來處 理（本人不提倡使用濾鏡）。filter:shadow濾鏡作用與dropshadow類似，也能使用對象產(chǎn)生陰影效果，不同的是shadow可產(chǎn)生漸近 效果，使用陰影更平滑實(shí)現(xiàn)。
濾鏡語法：
E {filter:shadow(Color=顏色值,Direction=數(shù)值,Strength=數(shù)值)}
其中E是元素選擇器，Color用于設(shè)定對象的陰影色；Direction用于設(shè)定投影的主向，取值為0即零度（表示向上方向），45為右 上，90為右，135為右下，180為下方，225為左下方，270為左方，315為左上方；Strength就是強(qiáng)度，類似于text-shadow中 的blur值。
? 我們先不管IE下的效果了，我個(gè)人認(rèn)為text-shadow運(yùn)用好了，也能像photoshop一樣制作出非常好的效果，下面我這里羅列出一些比較好看的實(shí)例以供大家參考
注：下面所有的Demo需要加上這個(gè)公用的樣式：
.demo {
background: #666666;
width: 440px;
padding: 30px;
font: bold 55px "微軟雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
color: #fff;
text-transform: uppercase;
}
?
?
效果一：Glow and Extra Glow effect(也就是NEON effect)
.demo2 {
text-shadow: 0 0 20px red;
}
?
?
輝光效果，我們設(shè)置比較大的模糊半徑來增加其輝光效果，你可以改變不同的模糊半徑值來達(dá)到不同的效果，當(dāng)然你也可以同時(shí)增加幾個(gè)不同的半徑值，創(chuàng)造多種不同的陰影效果。就如下面的NEON效果。
.demo3 {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}
?
?
?
效果二：Apple Style Effect
.demo4 {
color: #000;
text-shadow: 0 1px 1px #fff;
}
?
?
?
效果三：Photoshop Emboss Effect
.demo5 {
color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
?
?
?
效果二和效果三，我想用photoshop的朋友一定很熟悉，是不是很類似我們 photoshop中的投影和浮雕效果的呀。應(yīng)用這兩個(gè)效果大家一定要注意，其模糊值一定要設(shè)置為0，使文本不具有任何模糊效果，主要用來增加其質(zhì)感，你 也可以像photoshop中制作一樣，改變不同的投光角度，從而制作出不同的效果，這里我就不舉例子了，感興趣的朋友可以自己嘗試一下。
?
效果四：Blurytext Effect
.demo6 {
color: transparent;
text-shadow: 0 0 5px #f96;
}
?
?
?
用text-shadow制作模糊的效果主要要注意一點(diǎn)就是，把文本的前景色設(shè)置為透明transparent,如果模糊值越大，其效果越糊 糊；其二，我們不設(shè)置任何方向的偏移值。如果結(jié)合前面的photoshop emboss效果，可以讓你等到不同的效果。提醒一下opera瀏覽器不支持這個(gè)效果。
?
我們結(jié)合前面的Photoshop Emboss效果，我們可以制作出一個(gè)帶有模糊的浮雕效果：
.demo7 {
color: transparent;
text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;
}
?
?
效果五：Inset text effect
.demo8 {
color: #566F89;
background: #C5DFF8;
text-shadow: 1px 1px 0 #E4F1FF;
}
?
?
?
這種效果需要注意以：文字的前景色要比背景色暗，陰影顏色稍比背景色亮一點(diǎn)點(diǎn)，這一步很重要，如果陰影色太亮看起來會怪，如果太暗將沒有效果顯示。具體實(shí)現(xiàn)可能看看stylizedweb的制作。Inset效果是文本的影子效果，也是常見的一種效果，陰影是同一個(gè)小偏移量給人一種微妙的突出效果。
?
效果六：Stroke text effect
.demo9 {
color: #fff;
text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96;
}
?
?
?
描邊效果跟我們在Photoshop相比，我承認(rèn)效果差很多，出現(xiàn)斷點(diǎn)，但有時(shí)還是可以試用達(dá)到一種特殊的描邊效果，其主要運(yùn)用兩個(gè)陰影，第一個(gè)向左上投影，而第二向右下投影，還需注意，制作描邊的陰影效果我們不使用模糊值。
?
效果七：3D text effect
.demo10 {
color: #fff;
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),6px 6px rgba(197, 223, 248,0.8);
}
?
?
?
我們換過投影方向可以制作出另外一種3D文字效果：
.demo11 {
color: #fff;
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),-6px -6px rgba(197, 223, 248,0.8);
}
?
?
?
3D文字效果運(yùn)用原理就是像Photoshop一樣，我們在文字的下方或上方復(fù)制了多個(gè)圖層，并把每一個(gè)層向左上或右下方向移動一個(gè)1px距 離，從而制作出3D效果。同時(shí)我們層數(shù)越多，其越厚重。換成用text-shadow制作就是使用多個(gè)陰影，并把陰影色設(shè)置相同，給其使用rgba色效果 更佳，如上面的實(shí)例。
?
效果八：Vintge/Retro text effect：
.demo11 {
color: #eee;
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
}
?
?
?
Vintage retro這種風(fēng)格的文字效果是由兩個(gè)文本陰影合成的，這里需要注意的是：第一個(gè)陰影色和背景色相同；文本前景色和第二個(gè)陰影色相同
?
效果九：Anaglyphic text effect
.demo13 {
color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}
?
?
?
anaglyphic文字效果起到一種補(bǔ)色的效果，從而制作出一種三維效果圖。其效果是用css重新使用的文字陰影和文本前景的rgba色組合而成。在文本的前景色和陰影上同時(shí)使用rgba色，使底層的文字是通過影子可見。
? 上面我主要列出了九個(gè)不同效果的實(shí)例，當(dāng)然大家可以改變各種方式制作出一些特殊的效果，也再一次證實(shí)CSS3中的text-shadow實(shí)力是不淺的，希望大家能喜歡上這個(gè)屬性，并能更好的使用這個(gè)屬性。雖然現(xiàn)在IE不支持，但大家不要懼怕使用CSS3，因?yàn)槲覀冏銮岸说倪t早都會需要掌握這些新技術(shù)的。
?
?
? 二、IE下如何實(shí)現(xiàn)text-shadow
1、glow濾鏡下的文字陰影效果
IE濾鏡中有個(gè)名叫g(shù)low的濾鏡，用來實(shí)現(xiàn)光暈效果，于是，我們可以用來實(shí)現(xiàn)無方向的文字陰影效果。
該濾鏡最簡單的使用類似下面：
filter:glow(color=black,strength=5);
上面實(shí)現(xiàn)的效果就是5像素?cái)U(kuò)散大小的黑色光暈，效果類似下面（截自IE瀏覽器）：
HTML代碼：
<div class="bg">
<h1 class="font">空谷尋香覓幽蘭</h1>
</div>
css代碼：
.bg {
width: 512px;
? height: 140px;
? margin: 1em auto;
background: rgba(255, 123, 189, 0.59);
}
.font {
margin: 0;
padding: 1em;
color: #fff;
text-shadow: 0 0 5px rgb(0, 0, 0);
font-size: 36px;
font-family: "微軟雅黑";
float: left;
filter: glow(color=black, strength=5);
}
運(yùn)行結(jié)果簡要展示（上為chrome，下為IE）：
?
?
不足：
1. 雖然IE瀏覽器的glow光暈濾鏡可以實(shí)現(xiàn)勉強(qiáng)可以稱為的文字陰影效果，但是其效果相比原生的text-shadow屬性就是玄彬和郭德綱的區(qū)別，并且對不同顏色的支持效果大相徑庭，可以看到不僅光暈顏色不純（雜色叢生），且文字邊緣也有不和諧的黑色糙邊，讓人不僅感嘆：你能不能再丑一點(diǎn)。
2. 既然是光暈濾鏡，就決定了此方法實(shí)現(xiàn)的文字陰影效果是無方向性的，就四周均勻擴(kuò)散性質(zhì)的。這是該方法一個(gè)較大的局限性。
?
2、MotionBlur濾鏡下的文字陰影效果
IE濾鏡中有個(gè)名叫MotionBlur的濾鏡，用術(shù)語稱呼其為“動感模糊濾鏡”。該濾鏡使用的示例如下：
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145);
??? 用中文釋義就是：145度方向上5像是大小的動感模糊。
HTML代碼：
?????????? <div class="bg">
<h1 class="font">空谷尋香覓幽蘭</h1>
</div>
CSS代碼：
??????? .bg {
width: 512px;
height: 140px;
margin: 1em auto;
background: rgba(255, 123, 189, 0.59);
}
.font {
margin: 0;
padding: 1em;
color: #fff;
font-size: 36px;
font-family: "微軟雅黑";
text-shadow: 1px 1px 5px #fff;
filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145);
float: left;
}
?
運(yùn)行結(jié)果簡要展示（上為chrome，下為IE）：
?
不足：
1. MotionBlur濾鏡雖然有了方向性，也可以設(shè)定大小，但是，其模糊出來的投影顏色卻只能是文字本身的顏色。也就是說，單單一個(gè)標(biāo)簽，一個(gè)濾鏡是無法實(shí)現(xiàn)類似于文字白色，投影黑色這種效果的。但是，這種先天性的不足也是可以通過某些手段修復(fù)的。
2. 此濾鏡在應(yīng)用動感模糊的同時(shí)本身也被模糊了，相對于挖自己身上的肉填飽自己饑餓的肚子。這種實(shí)現(xiàn)效果顯然是會大打折扣的，正所謂人比人，氣死人啊。兩者的效果差距可以趕上鳳姐和志玲姐的差距了。然而，通過某些小手段，我們也可以讓MotionBlur濾鏡下的文字陰影效果爺變得很贊，這就是下面一節(jié)的內(nèi)容。
?
?
3、MotionBlur濾鏡下文字陰影效果進(jìn)一步優(yōu)化
效果實(shí)現(xiàn)的原理是兩端一模一樣的文字相互重疊，背后的文字動感模糊，前面的文字就是很純潔的文字了。
filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145);
考慮到不同IE瀏覽器下的兼容性問題，作為陰影效果的文字標(biāo)簽需要使用block水平的標(biāo)簽，且需要在IE6/IE7瀏覽器下haslayout。另外，這里的文字重疊是借助了absolute絕對定位元素的無高度性和無寬度性實(shí)現(xiàn)的
?
HTML代碼：
<div class="bg">
<h4 class="font"><span class="text">空谷尋香覓幽蘭</span><div class="sh">空谷尋香覓幽蘭</div></h4>
</div>
?
CSS代碼：
.bg {
width: 512px;
height: 140px;
margin: 1em auto;
background: rgba(255, 123, 189, 0.59);
}
.font {
margin: 0;
padding: 1em;
font-size: 36px;
font-family: "微軟雅黑";
}
.text {
color: #fff;
position: absolute;
}
.sh {
color: #000;
text-shadow: 1px 1px 5px #000;
filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145);
*zoom: 1;
}
?
?
運(yùn)行結(jié)果簡要展示（上為chrome，下為IE）：
不足：
?? 由于要借助于兩段不同的文字實(shí)現(xiàn)效果，所以，此方法不使用與長篇大論文字處的投影效果實(shí)現(xiàn)，像是標(biāo)題啊，導(dǎo)航啊這些文字不是很多的地方就可以使用使用。
?
4、遠(yuǎn)離text-shadow和濾鏡的文字陰影實(shí)現(xiàn)
這里實(shí)現(xiàn)的原理的精髓其實(shí)跟上面的其實(shí)一致，兩段一模一樣的文字，重疊顯示，不過，投影效果是通過兩段文字的錯(cuò)位差實(shí)現(xiàn)的，例如通過margin負(fù)值讓上下的文字出現(xiàn)1像素的偏移。
?
HTML代碼：
<div class="bg">
<h4 class="font"><span class="sh">空谷尋香覓幽蘭</span>
<div>空谷尋香覓幽蘭</div>
</h4>
</div>
?
?
CSS代碼：
.bg {
width: 512px;
height: 140px;
margin: 1em auto;
background: rgba(255, 123, 189, 0.59);
}
.font {
margin: 0;
padding: 1em;
font-size: 36px;
font-family: "微軟雅黑";
float: left;
}
.sh {
margin: -1px 0 0 -1px;
color: #fff;
position: absolute;
}
?
運(yùn)行結(jié)果簡要展示（上為chrome，下為IE）：
不足：
文字陰影效果的大小有限，且無法很好的實(shí)現(xiàn)透明度變化的投影效果。1像素的偏移投影是其最適用的情況。
?
兼容性解決方案：
?
1、text-shadow的各瀏覽器前綴
(1) Firefox4.0-
-moz-text-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;
(2) Safari and Google chrome10.0-
-webkit-text-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;
(3) Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
text-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;
2、text-shadow兼容IE6-8
E {filter:shadow(Color=顏色值,Direction=數(shù)值,Strength=數(shù)值)}?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/theWayToAce/p/5271482.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的CSS中的text-shadow。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript如何对欧姆龙、三菱、
- 下一篇： CSS布局方法