1. <tbody id="2rkzu"></tbody>
      <dd id="2rkzu"><noscript id="2rkzu"></noscript></dd>

      <th id="2rkzu"><pre id="2rkzu"></pre></th>

      <span id="2rkzu"><p id="2rkzu"></p></span>
      <rp id="2rkzu"></rp>

      <th id="2rkzu"><kbd id="2rkzu"></kbd></th>
      <rp id="2rkzu"><ruby id="2rkzu"></ruby></rp>
      <th id="2rkzu"><pre id="2rkzu"></pre></th>

      第1章 第5節 CSS3 文本效果

      推薦給朋友

      CSS3 文本效果

      CSS3 文本效果

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

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

      • 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
      澳门赌场真钱