在“CSS邊框border”這一節我們詳細講解了邊框border屬性。在CSS中，對於圖片的邊框，我們也是使用border屬性來定義。
文法：
border-width:像素值;
border-style:屬性值;
border-color:顏色值;
註：或者使用border簡潔寫法，如“border:1px solid gray;”。
說明：
如果大家忘了border屬性，請自行回去複習一下。
舉例1：
<!DOCTYPE html><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><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偽類”，來定義滑鼠經過圖片時會出現灰色邊框。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
