首頁 >web前端 >css教學 >CSS入門教學：圖片邊框border

CSS入門教學：圖片邊框border

高洛峰原創: 2017-02-08 10:07:041628瀏覽

一、圖片邊框border

在「CSS邊框border」這一節我們詳細解說了邊框border屬性。在CSS中，對於圖片的邊框，我們也是使用border屬性來定義。

語法：

border-width:像素值;

border-style:屬性值;

border-color:顏色值;

或簡潔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： CSS入門教學：圖片邊框border

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

更多CSS入門教學：圖片邊框border相關文章請關注PHP中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：初探HTML之CSS篇(屬性)下一篇：初探HTML之CSS篇(屬性)

看更多