CSS zoom缩放属性-之路教程

CSS zoom 属性值说明

值	描述
normal	指定元素的正常大小。
number	变焦因子。相当于相应的百分比（1.0 = 100％=正常）。大于1.0放大的值。值小于1.0缩小。
percentage	指定百分比的值为100％相当于正常。
reset	如果用户应用基于非捏合的缩放到文档，请勿放大元素。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

CSS zoom缩放属性

zoom 属性用于缩放内容。
要缩放内容，我们还可以使用设置为“scale()”的变换属性。

此功能是非标准的，不建议将其用于生产站点，因为 Firefox 不支持它。
因此，我们可以使用 transform: scale 来更改站点元素的大小。

初始值	normal
应用于	所有元素。
继承	无效
可动画的	是的。
版本	Safari CSS参考。
DOM 语法	object.style.zoom =“4”;

语法

zoom: normal | number | percentage | reset | initial | inherit;

缩放属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.element {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        zoom: 2;
      }
      div#grey {
        background-color: #666;
        zoom: normal;
      }
      div#blue {
        background-color: #1c87c9;
        zoom: 300%;
      }
      div#green {
        background-color: #8ebf42;
        zoom: 5;
      }
    </style>
  </head>
  <body>
    <h2>Zoom 属性示例</h2>
    <div id="grey" class="element"></div>
    <div id="blue" class="element"></div>
    <div id="green" class="element"></div>
  </body>
</html>

日期：2020-06-02 22:14:53 来源：oir作者：oir

←CSS z-index 属性

CSS zoom 属性值说明

语法

缩放属性示例：

目录