Home >Web Front-end >CSS Tutorial >CSS introductory tutorial: image border border

CSS introductory tutorial: image border border

高洛峰Original: 2017-02-08 10:07:041653browse

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>

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>

is browsing The browser preview effect is as follows:

CSS introductory tutorial: image border border

Analysis: In this example, we use the ":hover pseudo-class" to define that a gray border will appear when the mouse passes over the picture.

For more introductory CSS tutorials: image border related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A preliminary exploration of HTML’s CSS (attributes)Next article：A preliminary exploration of HTML’s CSS (attributes)

See more

CSS introductory tutorial: image border border

Related articles