邱兵兵的博客

github地址：https://github.com/chamrq20160729

CSS增加图片放大缩小效果

 

我学习web前端开发时发现图片的缩放不需要用JS来实现，用CSS就可以实现了，主要原理是使用box-sizing和border来实现。

代码如下：

<!doctype html>　　

<html>

　　<head>

　　　　<style type="text/css">

　　　　　a{

　　　  background:url(../images/产品1.jpg) no-repeat

   　　 box-sizing:border-box;/*为兼容不同浏览器可加相应前缀*/
   　　 border:5px solid transparent;
   　　 display:block;
   　　 width:205px;
   　　 height:205px;

}

　　　　　a:hover{

　　　　　　　　border:0;

}

　　　　</style>

　　</head>

　　<body>

　　　　<a href="#"></div>

　　</body>

</html>

　

　　

　　

　　

 

posted on 2016-08-28 16:46  qiubingbing  阅读(1700)  评论(0)    收藏  举报

导航