您好,欢迎访问一九零五行业门户网

CSS入门教程:图片边框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>
在浏览器预览效果如下:
举例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。
其它类似信息

推荐信息