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

 

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屬性能夠用來解決這一問題。請看下面的簡單用法：