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:
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:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
