6.3 設置網頁圖像樣式

當然也可以使用CSS樣式來美化圖片。

6.3.1 設置圖像邊框

border屬性用于設置圖片邊框，代碼如下：

      border: width color style

width指定邊框的寬度，color指定邊框的顏色，style指定邊框的樣式。

【例6-4】（實例文件：ch06\Chap6.4.html）設置圖像邊框。

相關的代碼實例請參考Chap6.4.html文件，在IE瀏覽器中運行的結果如圖6-5所示。

圖6-5 設置圖像邊框

6.3.2 設置圖像不透明度

在CSS中，使用opacity屬性設置圖片的不透明度，代碼如下：

      opacity: value | inherit;

value取值在0～1，0表示完全透明，1表示完全不透明。inherit表示應該繼承父元素opacity的屬性值。

【例6-5】（實例文件：ch06\Chap6.5.html）設置圖像不透明度。

相關的代碼實例請參考Chap6.5.html文件，在IE瀏覽器中運行的結果如圖6-6所示。

圖6-6 設置圖像不透明度

6.3.3 設置圓角圖像

border-radius用來設置圖像的圓角，代碼如下：

      border-radius: 1-4 length|% / 1-4 length|%;

border-radius可以設置4個值，設置一個值時，表示4個角設置相同的圓角。

【例6-6】（實例文件：ch06\Chap6.6.html）設置圖像的圓角。

相關的代碼實例請參考Chap6.6.html文件，在IE瀏覽器中運行的結果如圖6-7所示。

圖6-7 設置圓角圖像

6.3.4 設置陰影圖像

box-shadow屬性用于設置陰影圖像，代碼如下：

      box、text-shadow：X,Y，blur，color；

X、Y分別表示陰影在水平方向和垂直方向上的位移，blur表示模糊的半徑，最后一個表陰影的顏色。

【例6-7】（實例文件：ch06\Chap6.7.html）設置圖像陰影。

相關的代碼實例請參考Chap6.7.html文件，在IE瀏覽器中運行的結果如圖6-8所示。

圖6-8 設置陰影圖像

6.3.5 設置圖像與文字的對齊方式

設置圖像與文字的對齊方式，一般是設置圖片與文字垂直方向上的對齊方式，使用vertical-align屬性來設置，它的屬性值如表6-2所示。

表6-2 vertical-align屬性值

【例6-8】（實例文件：ch06\Chap6.8.html）設置圖像與文字的對齊方式。

相關的代碼實例請參考Chap6.8.html文件，在IE瀏覽器中運行的結果如圖6-9所示。

圖6-9 設置圖像與文字的對齊方式

6.3.6 圖文混排

一個普通的網頁最常見的就是圖文混排，下面以文字環繞效果為例進行介紹。

在CSS 3中使用float來實現文字環繞效果。

【例6-9】（實例文件：ch06\Chap6.9.html）設置圖文混排。

相關的代碼實例請參考Chap6.9.html文件，在IE瀏覽器中運行的結果如圖6-10所示。

圖6-10 圖文混排