CSS3文本效果
1.text-shadow屬性使用方法
text-shadow屬性使用方法如下所示。
text-shadow:length length length color
其中,前面三個length分別指陰影離開文字的橫方向距離、陰影離開文字的縱方向距離和陰影的模糊半徑,color指陰影的顏色。
下面是一個text-shadow屬性的使用示例。在該示例中給一段紅色文字繪制灰色陰影。其中陰影離開文字的橫方向距離和縱方向距離均為5個像素。
.wrap{ text-shadow:5px 5px 5px gray; color:red;font-size:50px; font-weight:bold; }
2.指定多個陰影
可以使用text-shadow屬性來給文字指定多個陰影,并且針對每個陰影使用不同顏色。
指定多個陰影時使用逗號將多個陰影進(jìn)行分隔。到目前為止,只有Firefox瀏覽器、Chrome瀏覽器及Opera瀏覽器對這個功能提供支持。
示例代碼
為文字依次指定了桔色、黃色及綠色陰影,同時也為這些陰影指定了適當(dāng)?shù)奈恢谩?/p>
.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)點字符是否位于線框之外。 3
punctuation-trim 規(guī)定是否對標(biāo)點字符進(jìn)行修剪。 3
text-align-last 設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。 3
text-emphasis 向元素的文本應(yīng)用重點標(biāo)記以及重點標(biāo)記的前景色。 3
text-justify 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時所使用的對齊方法。 3
text-outline 規(guī)定文本的輪廓。 3
text-overflow 規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情。 3
text-shadow 向文本添加陰影。 3
text-wrap 規(guī)定文本的換行規(guī)則。 3
word-break 規(guī)定非中日韓文本的換行規(guī)則。 3
word-wrap 允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。 3