CSS3 文本效果

CSS3中包含幾個新的文本特征。
在本章中您將了解以下文本屬性：

• text-shadow 屬性適用于文本陰影
• box-shadow 屬性適用于盒子陰影
• text-overflow
• word-wrap
• word-break

瀏覽器支持

CSS3 的文本陰影

CSS3 中，text-shadow屬性適用于文本陰影。

陰影效果!

您指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：

實例

給標題添加陰影:

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

嘗試一下 ?

CSS3 box-shadow屬性

CSS3 中 CSS3 box-shadow 屬性適用于盒子陰影

實例

div { 
  box-shadow: 10px 10px;
}

嘗試一下 ?

接下來給陰影添加顏色

實例

div {
  box-shadow: 10px 10px grey;
}

嘗試一下 ?

接下來給陰影添加一個模糊效果

實例

div { 
  box-shadow: 10px 10px 5px grey;
}

嘗試一下 ?

你也可以在 ::before 和 ::after 兩個偽元素中添加陰影效果

實例

#boxshadow { 
  position: relative; 
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
  padding: 10px; 
  background: white;
}
 #boxshadow img { 
  width: 100%; border: 1px solid #8a4419; 
  border-style: inset;
} 
#boxshadow::after { 
  content: ''; 
  position: absolute; 
  z-index: -1; /* hide shadow behind image */ 
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
  width: 70%; left: 15%; /* one half of the remaining 30% */ 
  height: 100px; 
  bottom: 0;
}

嘗試一下 ?

陰影的一個使用特例是卡片效果

實例

div.card { 
  width: 250px; 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  text-align: center;
}

文字卡片 ? 圖片卡片 ?

文字卡片

圖片卡片

CSS3 Text Overflow屬性

CSS3文本溢出屬性指定應向用戶如何顯示溢出內容

實例

p.test1 { 
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000; 
  overflow: hidden; 
  text-overflow: clip; 
} 

p.test2 { 
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

嘗試一下 ?

CSS3的換行

如果某個單詞太長，不適合在一個區(qū)域內，它擴展到外面：
CSS3中，自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字：
CSS代碼如下：

實例

允許長文本換行:

p {word-wrap:break-word;}

嘗試一下 ?

CSS3 單詞拆分換行

CSS3 單詞拆分換行屬性指定換行規(guī)則：
CSS代碼如下：

實例

p.test1 { word-break: keep-all;} 
p.test2 { word-break: break-all;}

嘗試一下 ?

新文本屬性

CSS3 字體

With CSS3, web designers are no longer forced to use only web-safe fonts

CSS3 @font-face 規(guī)則

以前CSS3的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體。
使用CSS3，網頁設計師可以使用他/她喜歡的任何字體。
當你發(fā)現(xiàn)您要使用的字體文件時，只需簡單的將字體文件包含在網站中，它會自動下載給需要的用戶。
您所選擇的字體在新的CSS3版本有關于@font-face規(guī)則描述。
您"自己的"的字體是在 CSS3 @font-face 規(guī)則中定義的。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
屬性

<small>Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體.
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類型）。
Chrome, Safari 和 Opera 也支持 SVG 字體/折疊.
Internet Explorer 同樣支持 EOT (Embedded OpenType) 字體.
注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 規(guī)則。</small>

使用您需要的字體

在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。

提示：URL請使用小寫字母的字體，大寫字母在IE中會產生意外的結果

如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：

實例

<style>
   @font-face{ 
      font-family: myFirstFont; 
      src: url(sansation_light.woff);
   } 
   div{ 
      font-family:myFirstFont;
   }
</style>

嘗試一下 ?

使用粗體文本

您必須添加另一個包含粗體文字的@font-face規(guī)則：

實例

@font-face{ 
    font-family: myFirstFont; 
    src: url(sansation_bold.woff); 
    font-weight:bold;
}

嘗試一下 ?
該文件"Sansation_Bold.ttf"是另一種字體文件，包含Sansation字體的粗體字。
瀏覽器使用這一文本的字體系列"myFirstFont"時應該呈現(xiàn)為粗體。
這樣你就可以有許多相同的字體@font-face的規(guī)則。

CSS3 字體描述

下表列出了所有的字體描述和里面的@font-face規(guī)則定義：