在“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偽類”，來定義鼠標經過圖片時會出現灰色邊框。