邊框(border): css控制的邊框?qū)傩园╞order-width, border-color, border-style.



Border之所以讓人很困惑主要源于IE5錯(cuò)綜復(fù)雜的BUG, 由于IE5是一個(gè)“will soon be dead” 的瀏覽器, 這里只例舉一個(gè)最為知名的關(guān)于border-width的BUG, 讓大家更好的理解border的含義, 先看下圖:







如上圖所示, 對(duì)象A(白色矩形)周圍有藍(lán)色邊框B, 可以看出A的實(shí)際寬度為ef, 而IE5不這么認(rèn)為, 它把cd的長(zhǎng)度定義為對(duì)象A的寬度, 這個(gè)bug在邊框的寬度小時(shí)幾乎察覺不到, 但在邊框與對(duì)象寬度相差不大時(shí)顯得尤為明顯.



新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來一起交流。



現(xiàn)在, 結(jié)合以上說明, 可以看出border是獨(dú)立于對(duì)象之外, 位于magin與padding之間(后說明), 具有固定寬度, 顏色和樣式的區(qū)域.

1. border-width: 其可有具體數(shù)值(如1px, 2px等)或是描述性(thin, medium, thick)的屬性值. 由于瀏覽器及個(gè)人設(shè)置的不同導(dǎo)致thin, medium, thick這些屬性值的表現(xiàn)不一, 不推薦使用. css代碼如下:
   
   
   
   border-width: 1px;
   
   border-width: 2px;
   
   border-width: thin;
   
   border-width: medium;
   
   border-width: thick;
   
   
   
   寬度效果如下(注意不同瀏覽器下的區(qū)別):
   
   
   
    1px    2px    thin    medium    thick 
   
   
   
2. border-style: 邊框樣式包括solid, dashed, dotted, double, groove, ridge, inset, outset等, 代碼如下:
   
   
   
   border-style: solid;
   
   border-style: dashed;
   
   border-style: dotted;
   
   border-style: double;
   
   border-style: groove;
   
   border-style: ridge;
   
   border-style: inset;
   
   border-style: outset;
   
   
   
   樣式效果如下(你可能需要Firefox或是Opera才能看到后四種效果):
   
   
   
    solid   
   
   
   
    dashed   
   
   
   
    dotted   
   
   
   
    double   
   
   
   
    groove   
   
   
   
    ridge   
   
   
   
    inset   
   
   
   
    outset   
   
   
   
3. border-color: 邊框顏色屬性和一般顏色屬性是一樣的, 可以參看屬性篇(1).
   
   
   
   Summary: 以上例舉的都是四邊相同樣式的情況, 其實(shí)可以分別設(shè)置border-top, border-right, border-bottom, border-left四邊的屬性, 比方說想要表現(xiàn)一個(gè)寬2px, 藍(lán)色(blue), 樣式為solid的上下邊框, 代碼如下:
   
   
   
   border-top-width: 2px;
   
   border-top-color: blue;
   
   border-top-style: solid;
   
   border-bottom-width: 2px;
   
   border-bottom-color: blue;
   
   border-bottom-style: solid;
   
   
   
   簡(jiǎn)寫為:
   
   
   
   border-top: blue 2px solid;
   
   border-bottom: blue 2px solid;
   
   
   
   表現(xiàn)如下:
   
   
   
    寬2px,藍(lán)色,樣式為solid的邊框 
   
   
   
   鏈接(link): 在html里用<a></a>標(biāo)明鏈接, 在css里用a作為鏈接的選擇器名.
   
   
   
   css的缺點(diǎn)和它的優(yōu)點(diǎn)一樣明顯, 其最大的缺陷就在于網(wǎng)頁的動(dòng)態(tài)表現(xiàn)不足, 在這一點(diǎn)上和Flash差距尤為突出.
   
   
   
   好在css還是留了一手, 那就是鏈接的偽類選擇器, 所謂偽類就是指依賴于瀏覽器或是用戶的狀態(tài). 對(duì)于鏈接來講, 存在link, hover, visited, active四種狀態(tài), 即四種偽類選擇器: a:link(存在鏈接, 但無鼠標(biāo)動(dòng)作), a:visited(被點(diǎn)擊或訪問過), a:hover(鼠標(biāo)懸停于鏈接上時(shí)的狀態(tài)), a:active(鼠標(biāo)點(diǎn)擊與釋放之間的狀態(tài)).
   
   
   
   css便是以這幾個(gè)偽類選擇器實(shí)現(xiàn)了其為數(shù)不多的動(dòng)態(tài)效果. 目前最為常用的就是導(dǎo)航條和按鈕的動(dòng)態(tài)顯示. 以下用一個(gè)動(dòng)態(tài)按鈕的實(shí)例來說明這四個(gè)偽類選擇器.
   
   
   
4. 首先準(zhǔn)備一副圖片(button.png), 如下圖(160px240px), 其由四幅160px60px的小圖自上而下排列而成.
   
   
   
    
   
   
   
   
   
   
   
5. 接著需要往你的本地調(diào)試文件夾(調(diào)試環(huán)境的建立方法參考屬性(1)中的說明)的index.htm中寫入html代碼, 如下:
   
   
   
   <div id=”button”><a href=”#”></a></div>
   
   
   
6. 在style.css中寫入以下代碼:
   
   
   
   body {background-color: #FFF;}
   

   button a{
   

   width:160px;
   
   height:60px;
   
   display:block;
   
   background:url(../image/button.png) no-repeat 0 0;
   
   } 
   

   button a:link { background-position:0 0;}
   

   button a:hover { background-position:0 -60px;} 
   

   button a:active { background-position:0 -120px;}
   

   button a:visited { background-position:0 -180px;}
   

   
   
   可以看到如 Example2 的效果.
   
   
   

7. 代碼解釋:
   
   
   
   <div id=”button”><a href=”#”></a></div>
   
   
   
   在index.htm寫入如上代碼, 目的在于插入一個(gè)id名為”button”的盒子(div),且其內(nèi)含有一個(gè)鏈接<a href=”#”></a>.
   
   
   

   button a{
   

   width:160px;
   
   height:60px;
   
   display:block;
   
   background:url(../image/button.png) no-repeat 0 0;
   
   }
   
   
   
   在css文件中寫入以上代碼, 目的在于控制盒子中鏈接的表現(xiàn), 通過名為”#button a”的選擇器來實(shí)現(xiàn). 鏈接的寬高為160px*60px, 背景為圖片button.png.
   
   
   
   在這強(qiáng)調(diào)一下display:block的作用. 由于在html文件中,鏈接<a href=”#”> </a>中沒有任何的內(nèi)容(content)填充, 如果沒有聲明”display:block”, 那么即使聲明了選擇器”#button a”的寬高, 瀏覽器也會(huì)因?yàn)閔tml文件中沒有內(nèi)容而無法顯示鏈接. 所以”display:block”在這里的作用就在于強(qiáng)制瀏覽器顯示沒有內(nèi)容填充的鏈接. 
   
   
   

   button a:link { background-position:0 0;}
   

   
   
   用偽類選擇器a:link聲明鏈接的背景圖片在左上角顯示, 即距離左邊和頂邊分別0, 0. 但由于已經(jīng)在選擇器 “#button a”中聲明了圖片位置, 此代碼可有可無.
   
   
   

   button a:hover { background-position:0 -60px;} 
   

   button a:active { background-position:0 -120px;}
   

   button a:visited { background-position:0 -180px;}
   

   
   
   用偽類選擇器a:hover聲明鼠標(biāo)懸停時(shí), 背景圖片上移60px, 而使排在第二位的綠色小圖片顯示出來;
   
   
   
   用偽類選擇器a:active聲明在鼠標(biāo)點(diǎn)擊與釋放之間的狀態(tài)時(shí), 背景圖片上移120px, 而使排在第三位的紅色小圖片顯示;
   
   
   
   用偽類選擇器a:visited聲明在鏈接被點(diǎn)擊或訪問過時(shí), 背景圖片上移180px, 而使排在第四位的灰色小圖片顯示;
   
   
   
   現(xiàn)在你基本了解了css動(dòng)態(tài)按鈕的制作過程, 但以上css代碼還存在一個(gè)嚴(yán)重的缺陷, 相信你會(huì)很快發(fā)現(xiàn)問題所在——這個(gè)按鈕居然是一個(gè)”一次性按鈕“, 也就是說這個(gè)按鈕在點(diǎn)擊第一次后, 就一直顯示那個(gè)灰色小圖片, 你能想出解決方法嗎?