在“CSS邊框border”這一節我們詳細講解了邊框border屬性。在CSS中,對於圖片的邊框,我們也是使用border屬性來定義。
語法:
border-width:像素值; border-style:屬性值; border-color:顏色值;
注:或者使用border簡潔寫法,如“border:1px solid gray;”。
說明:
如果大家忘了border屬性,請自行回去復習一下。
舉例1:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>圖片邊框border</title> <style type="text/css"> img { width:60px; height:60px; border:1px solid red; } </style> </head> <body> <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> </body> </html>
在浏覽器預覽效果如下:
舉例2:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>圖片邊框border</title> <style type="text/css"> img{width:60px;height:60px;} img:hover{border:1px solid gray;} </style> </head> <body> <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> </body> </html>
在浏覽器預覽效果如下:
分析:
在這個例子中,我們使用了“:hover偽類”,來定義鼠標經過圖片時會出現灰色邊框。