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