CSS3文字效果
1.text-shadow屬性使用方法
text-shadow屬性使用方法如下所示。
text-shadow:length length length color
其中,前面三個length分別指陰影離開文字的橫方向距離、陰影離開文字的縱向距離和陰影的模糊半徑,color指陰影的顏色。
下面是一個text-shadow屬性的使用範(fàn)例。在該範(fàn)例中給一段紅色文字繪製灰色陰影。其中陰影離開文字的橫方向距離和縱向距離均為5個像素。
.wrap{ text-shadow:5px 5px 5px gray; color:red;font-size:50px; font-weight:bold; }
2.指定多個陰影
可以使用text-shadow屬性來給文字指定多個陰影,並且針對每個陰影使用不同顏色。
指定多個陰影時使用逗號將多個陰影分隔。到目前為止,只有Firefox瀏覽器、Chrome瀏覽器及Opera瀏覽器對此功能提供支援。
範(fàn)例程式碼
為文字依序指定了桔色、黃色及綠色陰影,同時也為這些陰影指定了適當(dāng)?shù)奈恢谩?
.wrap { text-shadow:10px 10px #f39800,40px 35px #fff100,70px 60px #c0ff00; color:navy; font-size:50px; font-weight:bold; }
自動換行
單字太長的話就可能無法超出某個區(qū)域:
在CSS3 中,word-wrap 屬性允許您允許文字強(qiáng)製文字進(jìn)行換行- 即使這意味著會對單字進(jìn)行拆分:
#允許對長單字進(jìn)行拆分,並換行到下一行:
p?{word-wrap:break-word;}
新文字屬性? ? ? ? ? ? ? ? ? ??
?? ? ? ? ? ? ? ? ? ? ? ?說明? ? ? ? ? ? ? ? ? 適用#CSS
hanging-punctuation ? ? ? ? ?規(guī)定標(biāo)點(diǎn)字元是否位於線框外。 ? ? ? ? ? ? ? ? ? ? ? 3 ? ?
punctuation-trim ? ? ? ? ? ? ? ?時中使用標(biāo)記字元修剪。 ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?
text-align-last ? ? ? ? ?之後對上上加行中相加強(qiáng)制執(zhí)行上強(qiáng)制強(qiáng)制執(zhí)行符號或強(qiáng)制執(zhí)行後強(qiáng)制執(zhí)行符號或固定的強(qiáng)制執(zhí)行符。 ? ?3 ? ?
text-emphasis ? ?向元素的文字應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。 ? ? ? ? ? ? ?3 ? ?
###############################################################text-justify ? ?規(guī)定當(dāng) text-align 設(shè)定為 "justify" 時所使用的對齊方法。 ? ? ? ? ? 3 ? ?
text-outline ? ? ? ? ? ? ? ? ? ? ? ? ? ?作用 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ?. ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?
##text-shadow ? ? ? ? ??時使用中陰影 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ??? ? ?規(guī)定文字的換行規(guī)則。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?## 中規(guī)定?。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?word-wrap ? ?分割中分割中與中一行的單字分開並換行。 ? ? ? ? ? ? ? ? 3 ? ?