CSS scale 属性

定义和用法

scale 属性允许你更改元素的大小。

scale 属性定义了元素在 x 和 y 方向上的缩放比例值。你也可以定义元素在 z 方向上的缩放比例。

缩放值可以是一个值、两个值或三个值。

• 如果给出一个值，元素在 x 和 y 方向上的缩放比例相同。
• 如果给出两个值，元素分别在 x 和 y 方向上按指定的比例缩放。
• 如果给出三个值，元素分别在 x、y 和 z 方向上按指定的比例缩放。

为了更好地理解 scale 属性，请查看演示。

注意：缩放元素的另一种技术是使用带有 CSS scale() 函数 的 CSS transform 属性。本网页上解释的 CSS scale 属性可以说是一种更简单、更直接的缩放元素的方式。

实例

例子 1

更改元素的大小：

div {
  scale: 2;
}

亲自试一试

例子 2

当 scale 属性设置为两个值时，分别在 x 轴和 y 轴上设置大小。这里，元素在 x 轴上的大小变为两倍，在 y 轴上的大小变为一半：

div {
  scale: 2 50%;
}

亲自试一试

CSS 语法

scale: x-axis y-axis z-axis|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

教程：CSS 2D 变换

教程：CSS 3D 变换

参考：CSS rotate 属性

参考：CSS translate 属性