css3文字陰影屬性text-shadow
前面我們曾經學習了盒子陰影屬性box-shadow，這篇文章說的文字陰影屬性text-shadow。小文章一篇，希望大家通過這篇文章再來回顧一下box-shadow盒子陰影屬性。
text-shadow屬性值
對于w3c對于text-shadow的規范如下：
屬性名: box-shadow
屬性值: none | [<shadow>,]* <shadow>
初始值: none
應用于: 所有元素
繼承性: 是
百分比: N/A
計算值:
1、none，沒有指定任何的值，文本形式按照用戶代理或者csser設置的文本形式展示
2、[<shadow>,]* ，每一個shadow（陰影值）之間用逗號(,)隔開，*表示可以重復無限制。其中shadow的值有如下屬性值:
shadow的值有 [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]
color值可選，假如沒有指定，那么跟文本顏色一致，假如文本顏色也沒有指定，那么根據用戶代理指定。
offset-x，offset-y，前一個值為陰影水平位移，后一個值為垂直位移，這點跟box-shadow一致，并且這兩個值必須有，缺一不可。允許負值，offset-x負值向左偏移，offset-y向上偏移。
假如是多個shadow，那么就存在重疊現象，既然有重疊那就應該有層級關系，一般情況來說css中的層級關系是后來的值會覆蓋前面的值，比如這么寫css類
.f12{font-size:12px;}
.f12{font-size:14px;} //后者覆蓋前者樣式，所以文本字體會顯示14px
但是對于css屬性里面的值都是按照先來后到原則，并不是誰牛逼誰就在前面。這讓我想起來了初中的時候，不管是拍照還是排隊都是按照矮個子的在前面高個子在后面，就算是矮個子擋住了高個的下半身，但是起碼還可以看見一個頭嘛！
代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.f12{font-size:12px;}.f12{font-size:14px;}.text-shadow{text-shadow:0 0 #000,0 5px #f00,10px 0 #0ff; background-color:#18b4ed;color:#fff;font-size:50px;}.box-shadow{box-shadow:0 0 5px #000,0 10px #f00,10px 0 #0ff;width:100px;padding:10px;}<p class="f12">這是14px的文字大小<span style="font-size:12px;">這是12像素文本</span></p><p class="text-shadow">朋友推薦www.zzarea.com我聽一首DJ舞曲，名字有點怪怪的，歌曲叫《小紅帽》，我也是醉了</p><p class="box-shadow">假如你有幸也聽見這首歌，那么把你的想法在評論中寫出，其實應該打碼才對。</p> |