DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 8.2 圖片邊框border
8.2 圖片邊框border
編輯:CSS基礎知識     

一、圖片邊框border

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved