CSS zoom 屬性
更多“自己嘗試”的例子見下文。
定義和用法
zoom
屬性指定了元素的縮放因子。元素可以被放大和縮小。
預設值 | normal |
---|---|
繼承 | no |
可動畫 | 是的。 閱讀關於 animatable 的內容 |
版本 | CSS 視口模組級別 1 |
JavaScript 語法 | object.style.zoom = "3" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
zoom | 1 | 12 | 126 | 3.1 | 15.0 |
CSS 語法
zoom: normal|%|數字|unset|initial|inherit;
屬性值
值 | 描述 | 演示 |
---|---|---|
normal | 預設值。元素正常渲染 | 演示 ❯ |
% | 以百分比指定縮放因子。100% = 正常。要放大,請使用大於 100% 的值。要縮小,請使用小於 100% 的值 | 演示 ❯ |
數字 | 以數字指定縮放因子。1.0 = 正常。要放大,請使用大於 1.0 的值。要縮小,請使用小於 1.0 的值 | 演示 ❯ |
unset | 重置縮放因子(恢復正常) | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
使用 zoom
屬性來調整元素大小
div {
border-radius: 100%;
background: #73AD21;
padding: 20px;
width: 80px;
height: 80px;
}
div.a {
zoom: normal;
}
div.b {
zoom: 150%;
}
div.c {
zoom: 0.6;
}
自己動手試一試 »