在CSS3中,增加了豐富的文本修飾效果,使得網頁更加美觀舒服。下面列出了常用的CSS3文本屬性:
在CSS3中,我們可以使用text-shadow屬性來實現文字的陰影效果。
語法:
text-shadow:x-offset y-offset blur color;
說明:
x-offset:(水平陰影)表示陰影的水平偏移距離,單位可以是px、em或者百分比等。如果值為正,則陰影向右偏移;如果值為負,則陰影向左偏移;
y-offset:(垂直陰影)表示陰影的垂直偏移距離,單位可以是px、em或者百分比等。如果值為正,則陰影向下偏移;如果值為負,則陰影向上偏移;
blur:(模糊距離)表示陰影的模糊程度,單位可以是px、em或者百分比等。blur值不能為負。如果值越大,則陰影越模糊;如果值越小,則陰影越清晰。當然,如果不需要陰影模糊效果,可以吧blur值設置為0;
color:(陰影的顏色)表示陰影的顏色,可以使用 學習網的“在線調色板”獲取。
在CSS3中,我們可以使用text-stroke屬性為文字添加描邊效果。這個描邊效果,說白了就是給文字添加邊框,注意喔,“文字”也能添加邊框了呢。
語法:
text-stroke:寬度值 顏色值;
說明:
text-stroke是一個復合屬性,由text-stroke-width和text-stroke-color兩個子屬性組成。
(1)text-stroke-width屬性設置描邊的寬度,可以為一般的長度值。
(2)text-stroke-color屬性設置描邊的顏色。我們可以使用“在線調色板”來取色。
在CSS3中,文本溢出text-overflow屬性用於設置是否使用一個省略標記(…)標示對象內文本的溢出。
語法:
text-overflow:取值;
說明:
text-overflow屬性取值只有2個:
單獨使用text-overflow屬性是無法得到以下圖1的效果的。因為text-overflow屬性只是說明文字溢出時用什麼方式顯示,要實現溢出時產生省略號效果,還須定義2個內容:
下面是完整語法:
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
這3個屬性是必須一起使用才會有效果。
在CSS3中,我們可以使用word-wrap屬性來設置“長單詞”或“URL地址”是否換行到下一行。
語法:
word-wrap:取值;
說明:
word-wrap屬性只有2個取值:normal和break-word。
在CSS3中,我們可以使用@font-face方法來使得所有客戶端加載服務器端的字體文件,從而使得所有用戶的浏覽器都能正常顯示該字體。
語法:
@font-face { font-family : 字體名稱; src :url("字體文件路徑"); }
說明:
在CSS3中,我們可以使用font-size-adjust屬性來在字體類型(font-family)改變的情況下而保持字體大小(實際大小)不變。
語法:
font-size-adjust:屬性值;
說明:
font-size-adjust屬性取值為一個“aspect值”。