在網(wǎng)頁設計時，圖片的效果很大程度上影響到網(wǎng)頁效果，要使網(wǎng)頁圖文并茂并且布局結構合理，就要注意圖片的設置。通過CSS統(tǒng)一管理，不但可以更加精確地調(diào)整圖片的各種屬性，還可以實現(xiàn)很多特殊效果。本節(jié)將對圖片的邊框、圖片的大小與縮放、圖片對齊等屬性進行介紹。
在HTML語法中，可以直接通過<.img>標簽的border屬性來為圖片添加邊框，語法如下：<img src="圖片路徑" border="數(shù)值">
【示例1】
啟動Dreamweaver，新建一個網(wǎng)頁，保存為test.html，在<body>標簽內(nèi)輸入以下代碼：
<img src="images/11.jpg" border="0">
<img src="images/11.jpg" border="1">
<img src="images/11.jpg" border="2">
<img src="images/11.jpg" border="3">按F12鍵，在瀏覽器中預覽。
可以看到，用HTML控制圖片邊框是無法設計出豐富多彩的圖片效果的，需要使用CSS中的border-style、border-color和border-width 3個屬性來定義邊框。其語法如下：
border-style:參數(shù);
border-color:參數(shù);
border-width:數(shù)值;
border-style屬性用于設置邊框的樣式，用的最多的兩個參數(shù)是dotted表示點劃線，用dashed表示虛線，其他的一些值會在后面的章節(jié)中詳細說明。在網(wǎng)站建設中，border-color屬性用于設置邊框的顏色。bor-der-width屬性用于設置邊框的寬度。
【示例2】啟動Dreamweaver，新建一個網(wǎng)頁，保存為test1.html，在<body>標簽內(nèi)輸入以下代碼：
<img src="images/22.jpg" class="pic1"/>
<img src="images/22.jpg" class="pic2"/>
在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式，用來定義圖片邊框樣式。
.pic1 { border-style: dotted; /*點劃線*/
border-color: #000066; /*邊框顏色*/
border-width: 2px; /*邊框粗細*/}
.pic2 { border-style: dashed; /*點劃線*/
border-color: #FF0000; /*邊框顏色*/
border-width: 10px; /*邊框粗細*/}
【示例3】下面示例為圖像四邊設計不同的邊框樣式。
在CSS中，還可以分別設置4個邊框的不同樣式，即分別設置border-left、border-right、border-top、border-bottom的樣式。啟動Dreamweaver，新建一個網(wǎng)頁，保存為test2.html，在<body>標簽內(nèi)輸入以下代碼：
<img src="images/33.jpg"/>
在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式，用來定義圖片邊框樣式。
img { border-left-style: dotted; /*左點劃線*/
border-left-color: #FF9900; /*左邊框顏色*/
border-left-width: 5px; /*左邊框粗細*/
border-right-style: dashed;
border-right-color: #33CC33;
border-right-width: 2px;
border-top-style: solid; /*上實線*/
border-top-color: #CC00FF; /*上邊框顏色*/
border-top-width: 10px; /*上邊框粗細*/
border-bottom-style: groove;
border-bottom-color: #666666;
border-bottom-width: 15px;}
【示例4】在示例3中介紹了分別設置4個邊框的方法，border屬性還可以將各個值寫到同一語句，用空格分隔，這樣可以大大縮短代碼長度。
啟動Dreamweaver，新建一個網(wǎng)頁，保存為test3.html，在<body>標簽內(nèi)輸入以下代碼：
<img src="images/44.jpg" class="pic1"/>
<img src="images/44.jpg" class="pic2"/>
在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式，用來定義圖片邊框樣式。
.pic1 { border: 5px double #FF00FF; /*將各個值合并*/}.pic2 {
border-right: 5px double #000; border-left: 8px solid #45673A;}
可以看到代碼的長度明顯減少，這樣不但清晰易讀，而且大大加快了網(wǎng)頁下載速度。
【拓展】示例4是將border的各個屬性值寫到一起，有的時候還會出現(xiàn)這樣的語句：border-style:dotted solid dashed doubel、border-width:5px10px，這種設置方法也是正確的，但是上面這種語句如果寫成這樣：border:dotted solid dasheddoubel、borderh:5px 10px，就不對了。
制作網(wǎng)頁時，在設置邊框樣式時，如果border-style、border-width、bor-der-color只設置一個參數(shù)，則該參數(shù)將作用于4個邊，即4個邊的樣式風格一樣；如果設置兩個參數(shù)，則第一個參數(shù)作用于上、下邊框，第二個參數(shù)作用于左、右邊框；如果設置3個參數(shù)，則第一個參數(shù)作用于上邊框，第二個參數(shù)作用于左、右邊框，第三個參數(shù)作用于下邊框；如果設置4個參數(shù)，則按照上-右-下-左的順序作用于各個邊框。
pic1 { border-style: dotted solid; /*上、下邊框為dotted，左、右邊框為solid*/
border-width: 5px 10px 8px 3px; /*上邊框為5px，右邊框為10px，下右邊框為8px，左邊框為3px*/
border-color: #009966 #000; /*分別設置上、下和左、右邊框顏色*/}
.pic2 { border: 5px double #000; /*合并border的各個屬性*/}
CSS中很多其他的屬性也可以進行類似的操作，例如margin和padding:padding:0px 5px、margin:0px 10px 3px 20px。
提示：在設置border-style、border-color和border-width時，設置的順序是有講究的，在設置border(-?)color和border-width之前必須先設置border-style，否則border-color和border-width的效果將不會顯示。
當前文章標題：設置圖片樣式
當前URL：http://51zuanshi.com.cn/news/wzzz/3101.html
上一篇：在網(wǎng)頁中插入圖像
