第10章

應用CSS3的屬性本章概述本章的學習目標主要內容第10章應用CSS3的屬性本章概述第2頁本章概述到目前為止，本書已經介紹了CSS基礎、了解了新的選擇器、應用了Web字體，并且通覽了Web文檔的排版。現在，是時候應用更多的CSS3屬性，并將這些設計巧妙的屬性添加到網站中去了。本章將介紹新的顏色模型、透明度以及背景屬性，此外還會展示如何應用多重背景、邊框、陰影和漸變。第2頁本章概述到目前為止，本書已經介紹了CSS基礎、了解了新第3頁本章的學習目標了解如何在網頁中設置顏色與透明度掌握背景裁剪、多重背景以及設置背景尺寸的選項如何不利用圖片創建投影及圓角如何應用CSS3的屬性為邊框添加圖像了解CSS3的漸變功能第3頁本章的學習目標了解如何在網頁中設置顏色與透明度第4頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第4頁主要內容10.1顏色與透明度第5頁10.1顏色與透明度我們習慣在樣式表中用關鍵字（red或者blue）或者十六進制值（#fff或者

#ffffff）來表示顏色值，CSS3顏色模塊引入了兩種寫入顏色值的新方式：RGBa和HSLa，在決定使用哪一種方式之前，首先介紹RGB和HSL之間的區別。第5頁10.1顏色與透明度我們習慣在樣式表中用關鍵字（rRGBRGB描述了一種紅、綠、藍顏色模型，在這個模型中創建顏色時使用三個數值表示一種顏色。RGB是一種加性顏色模型，就是說一種顏色是由三原色相加得到，也即用這三個值進行十六進制乘法運算，區別僅在于顏色值表示的方式不同。RGB用0-255之間的數表示顏色值。第6頁RGBRGB描述了一種紅、綠、藍顏色模型，在這個模型中創建顏RGBa透明度通過給顏色屬性添加第四個值，就可以控制透明度。RGBa中的第四個值“a”表示alpha，它的作用和在Photoshop中修改alpha通道相同。第7頁起作用的RGBa透明度RGBa透明度通過給顏色屬性添加第四個值，就可以控制透明度。HSLa用CSS3添加顏色的另一種方法是使用HSLa（色度、飽和度、亮度和alpha），HSL比RGB更加直觀，可以想象一個色輪來猜測初始顏色，然后調整飽和度值和亮度值直到找到所需的顏色明暗度。第8頁HSLa色輪HSLa用CSS3添加顏色的另一種方法是使用HSLa（色度、不透明度alpha透明度并不是創建透明元素的唯一方法，另一種方法是使用opacity屬性。它與RGBa或HSLa中的alpha通道的工作方式類似，該屬性接受0到1之間的值——不同之處在于該屬性只能接受這一個值，這意味著仍然需要用其他屬性(比如background-color或color)來聲明顏色。為了將article元素的背景設為50%不透明，可以這樣做：第9頁不透明度alpha透明度并不是創建透明元素的唯一方法，另一種第10頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第10頁主要內容10.1顏色與透明度10.2背景CSS3最有趣并且具有許多不同實現的模塊之一就是BackgroundandBorders模塊，現在它是一個候選的推薦模塊。在本章稍后我們將回過頭來介紹邊框，現在先介紹背景裁剪、多重背景以及設置背景尺寸的選項。第11頁10.2背景CSS3最有趣并且具有許多不同實現的模塊之一background-clip屬性我們已經習慣于看到背景會在其邊框內進行拉伸，而BackgroundandBorders模塊中引入的background-clip屬性可以指定背景是否要在其邊框內進行拉伸。第12頁具有content-box值的應用效果背景圖像在元素的邊框內拉伸background-clip屬性我們已經習慣于看到背景會在background-origin屬性background-origin屬性允許我們為給定的元素指定其背景位置的起始點，它能接受的值與background-clip屬性相同。第13頁background-origin屬性background-background-size屬性background-size屬性可被用來簡化自互聯網出現之日開始網頁設計師就全力解決的問題之一，這個問題是指：不管瀏覽器窗口大小或者屏幕分辨率，不依賴于Flash或JavaScript就能獲得實際大小的背景圖像。解決該問題的方案：background-size屬性。第14頁background-size屬性background-si多重背景CSS3的BackgroundsandBorders模塊中囊括了為單個元素添加多重背景的能力。下面將展示使用background-image的例子。第15頁三幅背景圖像應用到body元素上多重背景CSS3的BackgroundsandBorde第16頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第16頁主要內容10.1顏色與透明度10.3邊框現在，可以不再通過添加額外的標記或者剪切外部圖像來創建一些微不足道的細節，比如創建一個圓角，從而使得設計更有吸引力。border-radius只是利用了CSS的功能就可以提供添加自然圓角的能力。同時，BackgroundsandBorders模塊還具有為邊框添加圖像的能力。第17頁10.3邊框現在，可以不再通過添加額外的標記或者剪切外部border-radius屬性只要寫幾行很短的CSS代碼就可以為任意元素添加圓角。簡寫形式的border-radius屬性可以實現這項功能，此外還可以為每個角單獨設置諸如border-top-left-radius之類的屬性。要知道半徑是圓的直徑的一半，所以，只需要通過為元素的每個角設置唯一的值，就可以將這些角變為相同的圓角。第18頁border-radius屬性只要寫幾行很短的CSS代碼就可border-image屬性border-image邊框圖像允許指定一幅圖像作為元素的邊框。邊框圖像可以由單幅圖像創建，該圖像可以在元素周邊的邊框中沿著不同的軸向進行裁切或拉伸，換句話說，圖像被4條線劃分(或切分)成9個切片。第19頁Opera中應用的邊框圖像border-image屬性border-image邊框圖像第20頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第20頁主要內容10.1顏色與透明度10.4下拉陰影下拉陰影，與圓角和漸變一樣，向盒添加陰影曾經是噩夢般的經歷，有了CSS3的BackgroundsandBorders模塊之后，情況就不再是這樣了。第21頁10.4下拉陰影下拉陰影，與圓角和漸變一樣，向盒添加陰影box-shadow屬性向元素添加box-shadow十分簡單，該屬性可以接受6個值：水平偏移(X)、垂直偏移(Y)、模糊、伸展距離、顏色以及一個可選關鍵字inset，該關鍵字將外陰影轉換成內陰影。第22頁沒有廠商前綴的box-shadow的效果box-shadow屬性向元素添加box-shadow十分簡text-shadow屬性text-shadow屬性與box-shadow屬性驚人地相似。可以用相同的標記box-shadow將一個或者幾個陰影應用于文本，即水平偏移、垂直偏移、模糊以及顏色。注意text-shadow不接受伸展值或關鍵字inset。第23頁text-shadow屬性text-shadow屬性與box第24頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第24頁主要內容10.1顏色與透明度第25頁10.5漸變用CSS3的能力創建特效的關鍵部分：漸變。CSS的漸變位于CSS的ImageValuesandReplacedContent模塊中。線性漸變放射漸變平鋪漸變第25頁10.5漸變用CSS3的能力創建特效的關鍵部分：第26頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第26頁主要內容10.1顏色與透明度10.6檢測支持和輔助其他瀏覽器第27頁總的來說，Safari、Chrome、Firefox、Opera以及InternetExplorer9和10對于本章所介紹的屬性具有較好的支持，但是對于InternetExplorer6-8瀏覽器有下面三種選擇。在CSS代碼中添加備選，以保證低性能瀏覽器可以適當地理解屬性。運行Modernizr之類檢測腳本，并相應地組織樣式表。用JavaScript庫彌補支持需求的差距。10.6檢測支持和輔助其他瀏覽器第27頁總的來說，Saf使用ModernizrModernizr(http://j.mp/modernizr)與CSS3屬性之間有如下關系。當用戶訪問網站時，Modernizr會運行并檢測用戶瀏覽器內部對CSS3和HTML5的支持，同時會給html元素增加一系列的類。例如，Modernizr會給InternetExplorer增加類no-cssgradients。這意味著可以在一個樣式表中擁有兩套規則來迎合兩種瀏覽器。第28頁使用ModernizrModernizr(http://j.CSS3Pie沒有使用CSS3Pie的規則如下所示：為了在IE6、7和8中增加這種支持，只要添加CSS3Piebehavior:url(js/PIE.htc)即可，這樣就可以在InternetExplorer中得到圓角。第29頁CSS3Pie沒有使用CSS3Pie的規則如下所示：第2第30頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第30頁主要內容10.1顏色與透明度10.7組合CSS3效果實例在本章前面介紹了許多在CSS3中可用的新屬性，下面用這些屬性來設計一個看起來很可愛的按鈕。第31頁處于正常和:hover狀態的按鈕10.7組合CSS3效果實例在本章前面介紹了許多在CSS第32頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第32頁主要內容10.1顏色與透明度10.8本章小結環顧互聯網，人們應用本章所述的技術創建了眾多實例，包括大量的只用到了CSS的圖標、形狀、按鈕、背景和徽標，其中一些用到了語義HTML，其他的用到了大量額外的div或span標記來獲得本應是圖像的效果。如果正在閱讀本書，就會對此有更深刻的理解。要巧妙地使用CSS3屬性以及何時使用才是合適的。第33頁10.8本章小結環顧互聯網，人們應用本章所述的技術創建了第10章

應用CSS3的屬性本章概述本章的學習目標主要內容第10章應用CSS3的屬性本章概述第35頁本章概述到目前為止，本書已經介紹了CSS基礎、了解了新的選擇器、應用了Web字體，并且通覽了Web文檔的排版。現在，是時候應用更多的CSS3屬性，并將這些設計巧妙的屬性添加到網站中去了。本章將介紹新的顏色模型、透明度以及背景屬性，此外還會展示如何應用多重背景、邊框、陰影和漸變。第2頁本章概述到目前為止，本書已經介紹了CSS基礎、了解了新第36頁本章的學習目標了解如何在網頁中設置顏色與透明度掌握背景裁剪、多重背景以及設置背景尺寸的選項如何不利用圖片創建投影及圓角如何應用CSS3的屬性為邊框添加圖像了解CSS3的漸變功能第3頁本章的學習目標了解如何在網頁中設置顏色與透明度第37頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第4頁主要內容10.1顏色與透明度第38頁10.1顏色與透明度我們習慣在樣式表中用關鍵字（red或者blue）或者十六進制值（#fff或者

#ffffff）來表示顏色值，CSS3顏色模塊引入了兩種寫入顏色值的新方式：RGBa和HSLa，在決定使用哪一種方式之前，首先介紹RGB和HSL之間的區別。第5頁10.1顏色與透明度我們習慣在樣式表中用關鍵字（rRGBRGB描述了一種紅、綠、藍顏色模型，在這個模型中創建顏色時使用三個數值表示一種顏色。RGB是一種加性顏色模型，就是說一種顏色是由三原色相加得到，也即用這三個值進行十六進制乘法運算，區別僅在于顏色值表示的方式不同。RGB用0-255之間的數表示顏色值。第39頁RGBRGB描述了一種紅、綠、藍顏色模型，在這個模型中創建顏RGBa透明度通過給顏色屬性添加第四個值，就可以控制透明度。RGBa中的第四個值“a”表示alpha，它的作用和在Photoshop中修改alpha通道相同。第40頁起作用的RGBa透明度RGBa透明度通過給顏色屬性添加第四個值，就可以控制透明度。HSLa用CSS3添加顏色的另一種方法是使用HSLa（色度、飽和度、亮度和alpha），HSL比RGB更加直觀，可以想象一個色輪來猜測初始顏色，然后調整飽和度值和亮度值直到找到所需的顏色明暗度。第41頁HSLa色輪HSLa用CSS3添加顏色的另一種方法是使用HSLa（色度、不透明度alpha透明度并不是創建透明元素的唯一方法，另一種方法是使用opacity屬性。它與RGBa或HSLa中的alpha通道的工作方式類似，該屬性接受0到1之間的值——不同之處在于該屬性只能接受這一個值，這意味著仍然需要用其他屬性(比如background-color或color)來聲明顏色。為了將article元素的背景設為50%不透明，可以這樣做：第42頁不透明度alpha透明度并不是創建透明元素的唯一方法，另一種第43頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第10頁主要內容10.1顏色與透明度10.2背景CSS3最有趣并且具有許多不同實現的模塊之一就是BackgroundandBorders模塊，現在它是一個候選的推薦模塊。在本章稍后我們將回過頭來介紹邊框，現在先介紹背景裁剪、多重背景以及設置背景尺寸的選項。第44頁10.2背景CSS3最有趣并且具有許多不同實現的模塊之一background-clip屬性我們已經習慣于看到背景會在其邊框內進行拉伸，而BackgroundandBorders模塊中引入的background-clip屬性可以指定背景是否要在其邊框內進行拉伸。第45頁具有content-box值的應用效果背景圖像在元素的邊框內拉伸background-clip屬性我們已經習慣于看到背景會在background-origin屬性background-origin屬性允許我們為給定的元素指定其背景位置的起始點，它能接受的值與background-clip屬性相同。第46頁background-origin屬性background-background-size屬性background-size屬性可被用來簡化自互聯網出現之日開始網頁設計師就全力解決的問題之一，這個問題是指：不管瀏覽器窗口大小或者屏幕分辨率，不依賴于Flash或JavaScript就能獲得實際大小的背景圖像。解決該問題的方案：background-size屬性。第47頁background-size屬性background-si多重背景CSS3的BackgroundsandBorders模塊中囊括了為單個元素添加多重背景的能力。下面將展示使用background-image的例子。第48頁三幅背景圖像應用到body元素上多重背景CSS3的BackgroundsandBorde第49頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第16頁主要內容10.1顏色與透明度10.3邊框現在，可以不再通過添加額外的標記或者剪切外部圖像來創建一些微不足道的細節，比如創建一個圓角，從而使得設計更有吸引力。border-radius只是利用了CSS的功能就可以提供添加自然圓角的能力。同時，BackgroundsandBorders模塊還具有為邊框添加圖像的能力。第50頁10.3邊框現在，可以不再通過添加額外的標記或者剪切外部border-radius屬性只要寫幾行很短的CSS代碼就可以為任意元素添加圓角。簡寫形式的border-radius屬性可以實現這項功能，此外還可以為每個角單獨設置諸如border-top-left-radius之類的屬性。要知道半徑是圓的直徑的一半，所以，只需要通過為元素的每個角設置唯一的值，就可以將這些角變為相同的圓角。第51頁border-radius屬性只要寫幾行很短的CSS代碼就可border-image屬性border-image邊框圖像允許指定一幅圖像作為元素的邊框。邊框圖像可以由單幅圖像創建，該圖像可以在元素周邊的邊框中沿著不同的軸向進行裁切或拉伸，換句話說，圖像被4條線劃分(或切分)成9個切片。第52頁Opera中應用的邊框圖像border-image屬性border-image邊框圖像第53頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第20頁主要內容10.1顏色與透明度10.4下拉陰影下拉陰影，與圓角和漸變一樣，向盒添加陰影曾經是噩夢般的經歷，有了CSS3的BackgroundsandBorders模塊之后，情況就不再是這樣了。第54頁10.4下拉陰影下拉陰影，與圓角和漸變一樣，向盒添加陰影box-shadow屬性向元素添加box-shadow十分簡單，該屬性可以接受6個值：水平偏移(X)、垂直偏移(Y)、模糊、伸展距離、顏色以及一個可選關鍵字inset，該關鍵字將外陰影轉換成內陰影。第55頁沒有廠商前綴的box-shadow的效果box-shadow屬性向元素添加box-shadow十分簡text-shadow屬性text-shadow屬性與box-shadow屬性驚人地相似。可以用相同的標記box-shadow將一個或者幾個陰影應用于文本，即水平偏移、垂直偏移、模糊以及顏色。注意text-shadow不接受伸展值或關鍵字inset。第56頁text-shadow屬性text-shadow屬性與box第57頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第24頁主要內容10.1顏色與透明度第58頁10.5漸變用CSS3的能力創建特效的關鍵部分：漸變。CSS的漸變位于CSS的ImageValuesandReplacedContent模塊中。線性漸變放射漸變平鋪漸變第25頁10.5漸變用CSS3的能力創建特效的關鍵部分：第59頁主要內容10.1顏色與透明度10.2背景10.3邊框10.4下拉陰影10.5漸變10.6檢測支持和輔助其他瀏覽器10.7組合CSS3效果實例10.8本章小結第26頁主要內容10.1顏色與透明度10.6檢測支持和輔助其他瀏覽器第60頁總的來說，Safari、Chrome、Firefox、Opera以及InternetExplorer9和10對于本章所介紹的屬性具有較好的支持，但是對于InternetExplorer6-8瀏覽器有下面三種選擇。在CSS代碼中添加備選，以保證低性能瀏覽器可以適當地理解屬性。運行Modernizr之類檢測腳本，并相應地組織樣式表。