一、图片边框border
在“CSS边框border”这一节我们详细讲解了边框border属性。在CSS中，对于图片的边框，我们也是使用border属性来定义。
语法：
border-width:像素值;
border-style:属性值;
立即学习“前端免费学习笔记（深入）”；
border-color:颜色值;
注：或者使用border简洁写法，如“border: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：
<!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中文网！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
129
收藏
