您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 文本效果

CSS3 文本效果

此節有 117 人學習過     參與評論

CSS3 文本效果

CSS3 包含多個新的文本特性。

在本章中,您將學到如下文本屬性:

  • 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 可向文本應用陰影。

文本陰影效果

您能夠規定水平陰影、垂直陰影、模糊距離,以及陰影的顏色:

實例

向標題添加陰影:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

親自試一試

CSS3 自動換行

單詞太長的話就可能無法超出某個區域:

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 規定標點字符是否位于線框之外。 3
punctuation-trim 規定是否對標點字符進行修剪。 3
text-align-last 設置如何對齊最后一行或緊挨著強制換行符之前的行。 3
text-emphasis 向元素的文本應用重點標記以及重點標記的前景色。 3
text-justify 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 3
text-outline 規定文本的輪廓。 3
text-overflow 規定當文本溢出包含元素時發生的事情。 3
text-shadow 向文本添加陰影。 3
text-wrap 規定文本的換行規則。 3
word-break 規定非中日韓文本的換行規則。 3
word-wrap 允許對長的不可分割的單詞進行分割并換行到下一行。 3

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (117人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 毛片曰本女人牲交视频视频| 2020国产成人精品视频| 中国三级片| 无码h片在线观看网站| 国产A毛片高清视频| 人妻系列无码专区久久五月天| 九九线精品视频在线观看视频| 自拍偷自拍亚洲精品第1页| 三级片在线播放| h网站| 波多野结衣av高清一区二区三区| 狠狠躁天天躁无码中文字幕| 在线观看无码h片无需下载| 无限资源中文免费观看| 我和公大货车上发生了性关系| 梅丽莎·劳伦a片在线播放| japanese日本人妻共享| 光根电影院理论片无码| 国产综合亚洲区| 亚洲日本人成网站在线播放| 日本在线永久免费视频aa| 欧美a级在线现免费观看| 快穿之玉梯横体全文阅读青亘| 亚洲日韩中文字幕日本有码| 18出禁止看的色视频在线观看| 亚洲综合小说另类图片动图| 国产一区二区三区中文在线| 日韩理论午夜无码| 一级a做爰片试看,免费| 偷拍色拍亚洲区| 在公车上被轮流进入| http://www.d12clan.com