設定圖片樣式
設定圖片樣式
圖片是網頁中不可缺少的內容，它能使頁面更加豐富多彩，能讓人更直觀地感受到網頁所要傳達給瀏覽者的資訊。下面將詳細介紹CSS設定圖片風格樣式的方法，包括圖片的邊框和圖片的縮放等等。
在HTML中，大家都知道，圖片即img元素，作為HTML的一個獨立物件，需要佔據一定的空間。因此，img元素在頁面中的風格樣式仍然用盒模型來設計。
1.設定圖片邊框
在HTML中可以直接通過<img>標記的border屬性值為圖片新增邊框，屬性值為邊框的粗細，以畫素為單位，從而控制邊框的粗細。當設定border屬性值為0時，則顯示沒有邊框。
例如：
<img src="001.jpg" border="0"> <!--顯示為沒有邊框--> <img src="001.jpg" border="1"> <--顯示邊框的粗細為 1px--> <img src="001.jpg" border="2"> <--顯示邊框的粗細為 2px--> <img src="001.jpg" border="3"> <--顯示邊框的粗細為 3px--> <img src="001.jpg" border="4"> <--顯示邊框的粗細為 4px-->
通過瀏覽器的解析，圖片的邊框粗細從左至右依次遞增，效果如下：
通過瀏覽器的解析，圖片的邊框粗細依次遞增，效果如上。
然而使用這種方法有很大的限制，即所有的邊框都只能是黑色，而且風格十分單一，都是實線，只是在外邊框粗細上能夠進行調整。
如果希望改變邊框的顏色，或者換成虛線邊框，僅僅依靠HTML是不夠的，是無法實現的。下面將會講到如何使用CSS樣式美化圖片的邊框。
例如：
<html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .demo1{ border-style:dotted; /*點畫線邊框*/ border-color: #996600; /*邊框顏色為金黃色*/ border-width: 4px; /*邊框粗細為4px*/ margin:2px; } .demo2{ border-style:dashed; /*虛線邊框*/ border-color: blue; /*邊框顏色為藍色*/ border-width: 2px; /*邊框粗細為2px*/ margin:2px; } .demo3{ border-style:solid dotted dashed double; /*4邊的線型依次為實線，點畫線，虛線和雙線邊框*/ border-color:red green blue purple; /*4邊的顏色依次為紅色，綠色，藍色和紫色*/ border-width: 1px 2px 3px 4px; /*4邊的邊框粗細依次為1px 2px 3px 4px*/ margin:2px; } </style> </head> <body> <img src="21.jpg" class="demo1"> <img src="21.jpg" class="demo2"> <img src="21.jpg" class="demo3"> </body> </html>
效果如下：
如果希望分別設定4條邊框的不同樣式，在CSS中也是可以實現的，只需要分別設定 border-left、border-right、border-top、border-bottom的樣式即可，依次對應於左、右、上、下4條邊框。
2.設定圖片縮放
使用CSS樣式控制圖片的大小，可以通過width 和height兩個屬性來實現。需要注意的是，當width和height兩個屬性的取值使用百分比數值時，它是相對於父元素而言的。如果將這兩個屬性設定為相對body的寬度或高度，就可以實現當瀏覽器視窗改變時，圖片大小也發生相應變化的效果。
設定圖片的縮放如下：
<html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .demo1{ width:30%; height:40%; } .demo2{ width:150px; height:150px; } </style> </head> <body> <div > <img src="21.jpg" > <img src="21.jpg" class="demo1"> <img src="21.jpg" class="demo2"> </div> </body> </html>
效果如下：
說明：
在demo1中定義width和height兩個屬性的取值為百分比數值，該數值是相對與div容器而言的，而不是相對於圖片本身。
demo2中定義width和height 兩個屬性的取值為絕對畫素值，圖片將按照定義的畫素值顯示大小。