设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › Css/Css3教程 › css缩放zoom样式使用和方法教程

css缩放zoom样式使用和方法教程

[复制链接]
查看2654 | 回复0 | 2020-7-23 21:02 | 显示全部楼层 |阅读模式
语法：zoom:值
取值：值是一个倍数
案例代码如下：
  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         .box{
  6.                 width:200px;
  7.                 height:200px;
  8.                 border:1px solid #000;
  9.                
  10.         }
  11.         div.box:hover{
  12.                 transform:scale(2);
  13.                 /*zoom:2;*/
  14.         }
  15.         .box1{
  16.                 width:100px;
  17.                 height:100px;
  18.                 background:#990;        
  19.         }
  20. </style>
  21. </head>

  23. <body>
  24. <div class="box">
  25.         
  26. </div>
  27. <div class="box1"></div>
  28. </body>
复制代码

css缩放zoom样式使用和方法教程

css缩放zoom样式使用和方法教程

  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         .box{
  6.                 width:200px;
  7.                 height:200px;
  8.                 border:1px solid #000;
  9.                
  10.         }
  11.         div.box:hover{
  12.                 /*transform:scale(2);*/       
  13.                 zoom:2;
  14.         }
  15.         .box1{
  16.                 width:100px;
  17.                 height:100px;
  18.                 background:#990;       
  19.         }
  20. </style>
  21. </head>

  23. <body>
  24. <div class="box">
  25.        
  26. </div>
  27. <div class="box1"></div>
  28. </body>
复制代码

css缩放zoom样式使用和方法教程

css缩放zoom样式使用和方法教程
css教程, css3教程

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

admin

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16
回复楼主 返回列表