CSS3 文本效果
CSS3 包含多個新的文本特性。
在本章中,您將學(xué)到如下文本屬性:
text-shadow
word-wrap
瀏覽器支持
屬性 瀏覽器支持
text-shadow
word-wrap
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 屬性。
所有主流瀏覽器都支持 word-wrap 屬性。
注釋:Internet Explorer 9 以及更早的版本,不支持 text-shadow 屬性。
CSS3 文本陰影
在 CSS3 中,text-shadow 可向文本應(yīng)用陰影。
文本陰影效果
您能夠規(guī)定水平陰影、垂直陰影、模糊距離,以及陰影的顏色:
實例
向標題添加陰影:
h1 { text-shadow: 5px 5px 5px #FF0000; }
親自試一試
CSS3 自動換行
單詞太長的話就可能無法超出某個區(qū)域:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
在 CSS3 中,word-wrap 屬性允許您允許文本強制文本進行換行 - 即使這意味著會對單詞進行拆分:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
下面是 CSS 代碼:
實例
允許對長單詞進行拆分,并換行到下一行:
p {word-wrap:break-word;}
親自試一試
新的文本屬性
屬性 描述 CSS
hanging-punctuation 規(guī)定標點字符是否位于線框之外。 3
punctuation-trim 規(guī)定是否對標點字符進行修剪。 3
text-align-last 設(shè)置如何對齊最后一行或緊挨著強制換行符之前的行。 3
text-emphasis 向元素的文本應(yīng)用重點標記以及重點標記的前景色。 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 允許對長的不可分割的單詞進行分割并換行到下一行。 3
作者:大學(xué)生新聞網(wǎng) 來源:大學(xué)生新聞網(wǎng)
- CSS3 字體
- 在 CSS3 之前,web 設(shè)計師必須使用已在用戶計算機上安裝好的字體。
- 03-20 關(guān)注:0
- CSS3 文本效果
- Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 屬性。
- 03-20 關(guān)注:0
- CSS3 背景
- CSS3 包含多個新的背景屬性,它們提供了對背景更強大的控制。
- 03-19 關(guān)注:5
- CSS3 邊框
- 通過 CSS3,您能夠創(chuàng)建圓角邊框,向矩形添加陰影,使用圖片來繪制邊框 - 并且不需使用設(shè)計軟件,比如 PhotoShop。
- 03-19 關(guān)注:4
- CSS3 簡介
- CSS3 完全向后兼容,因此您不必改變現(xiàn)有的設(shè)計。瀏覽器通常支持 CSS2。
- 03-19 關(guān)注:5
- Linux bc命令:浮點運算
- bc的英文全拼為“ Binary Calculator ”,是一種支持任意精度的交互執(zhí)行的計算器語言。
- 03-19 關(guān)注:6