IT兄弟連 HTML5教程 CSS3揭秘 CSS3屬性2

• 2019 年 11 月 12 日
• 筆記

3 背景屬性

在CSS3中提供了多個背景屬性，這裡只介紹兩個比較常用的屬性，其他屬性可以從手冊中獲取幫助。在CSS3中，通過background-image或者background屬性可以為一個容器設置多張背景圖片，也就是說可以把不同的背景圖片放到一個塊元素中。多張背景圖片的URL之間使用逗號隔開即可。如果有多張背景圖片，而其他屬性只有一個，那麼所有背景圖片都應用該屬性值。程式碼如下所示：

背景圖片大小調整也是CSS3提供的一個新特性，它使得開發人員可以隨心所欲地控制背景圖片的尺寸大小。在CSS2中，背景圖片的大小在樣式中是不可控的，比如要想使得背景圖片充滿某個區域，要麼重新做張大點的圖，要麼只能讓它以平鋪的方式來填充。在CSS3中提供了background-size屬性，使得開發人員既可以直接縮放背景圖片來填充這個區域，也可以設置背景圖片大小，然後以設置好的尺寸去平鋪這個區域。background-size屬性需要一個或兩個值（一個為必填，一個為可選），這些值既可以是像素（px），也可以是百分比（%）或auto，還可以是特定值cover、contain。示例程式碼如下所示：

其中background-size第一個值用於指定背景圖片的寬度，第二個值用於指定背景圖片的高度。如果只給background-size設置一個值，則第二個值默認為auto（cover和contain除外）。background-size屬性的特定值如下。

Ø　cover：保持圖片本身的寬高比例，將圖片縮放到完全覆蓋定義背景的區域。

Ø　contain：保持圖片本身的寬高比例，將圖片縮放到寬度或高度適應定義背景的區域。

4 文本屬性

關於CSS3的文本新屬性有很多，在這些屬性中常用的有兩個：一個是可以為文字添加陰影的text-shadow屬性，另一個則是可以強制對單詞進行換行處理的word-wrap屬性。text-shadow屬性要求的瀏覽器版本較高，對於IE來說，至少需要IE 10以上版本的支援，至於Firefox、Chrome、Safari及Opera等瀏覽器則完全支援這一新屬性。大家或許常常借鑒一些國外的主題，發現有些標題會帶有很好看的陰影，但在IE下無法正常地顯示出來，這正是text-shadow屬性的功勞。word-wrap屬性算是一個能夠被廣泛支援的新屬性，幾乎所有的主流瀏覽器都支援這一屬性，即使是IE也不例外。

4.1 給文字加上陰影的text-shadow屬性

text-shadow屬性是我們可以省略前綴的幾個屬性之一，這個屬性與邊框的陰影屬性（box-shadow）類似，共包含4個參數：水平陰影、垂直陰影、模糊距離及陰影的顏色，其中前3個參數均可以用負值來表示。下面給出一個簡單的程式碼示例：

4.2 強制單詞換行的word-wrap屬性

當段落中出現特別長的單詞時，如果沒有強制換行，則可能導致某個單詞大量溢出或者直接自動換行而導致行尾留出很大的空白，這些都使得我們的文本變得很不整齊，word-wrap屬性可以用來解決這一問題。請看下面的簡單用法：