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