CSS增加图片放大缩小效果


 

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

代码如下:

<!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>

 

  

  

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM