CSS入门教程：图片边框border

来源：动视网责编：小采时间：2020-11-27 18:53:25

CSS入门教程：图片边框border

CSS入门教程：图片边框border:一、图片边框border在CSS边框border这一节我们详细讲解了边框border属性。在CSS中，对于图片的边框，我们也是使用border属性来定义。语法：border-width:像素值;border-style:属性值;border-color:颜色值; 注：或者使用border简洁写法，

推荐度：

点击下载本文 文档为doc格式

导读CSS入门教程：图片边框border:一、图片边框border在CSS边框border这一节我们详细讲解了边框border属性。在CSS中，对于图片的边框，我们也是使用border属性来定义。语法：border-width:像素值;border-style:属性值;border-color:颜色值; 注：或者使用border简洁写法，

一、图片边框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>

在浏览器预览效果如下：

CSS入门教程：图片边框border

举例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>

在浏览器预览效果如下：

CSS入门教程：图片边框border