CSS introductory tutorial: image border border-CSS Tutorial-php.cn

CSS introductory tutorial: image border border

高洛峰

Release： 2017-02-08 10:07:04

Original

1605 people have browsed it

1. Picture border border

In the section "CSS border border" we explain the border property in detail. In CSS, we also use the border attribute to define the border of the image.

Syntax:

border-width: pixel value;

border-style: attribute value;

border -color: color value;

Note: Or use the concise border writing method, such as "border:1px solid gray;".

Note:

If you forget the border attribute, please go back and review it yourself.

Example 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>

Copy after login

The preview effect in the browser is as follows:

CSS introductory tutorial: image border border

Example 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>

Copy after login

is browsing The browser preview effect is as follows:

CSS introductory tutorial: image border border