scale

基线广泛可用

自 2022年8月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

CSS 属性 scale 允许你可以分别且独立地指定 CSS 属性 transform 缩放的比例。这更好地映射到典型的 UI（用户界面）用法中，并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。

语法

css

/* 关键值 */
scale: none;

/* 单个值 */
/* 设定比 1 大的数值使该元素变大 */
scale: 2;
/* 设定比 1 小的数值使该元素缩小 */
scale: 0.5;

/* 两个值 */
scale: 2 0.5;

/* 三个值 */
scale: 2 0.5 2;

取值

单一数值: 单一的数值即指定了一个缩放系数，同时作用于 X 轴和 Y 轴让该元素进行缩放，相当于指定了单个值的 scale()(2D 缩放) 函数。
两个长度/百分比值: 两个数值即分别指定了 2D 比例的 X 轴和 Y 轴的缩放系数，相当于指定了两个值的 scale()（2D 缩放）函数。
三个长度/百分比值: 三个数值即分别指定了 3D 比例的 X 轴、Y 轴和 Z 轴的缩放系数。相当于一个 scale3d() 函数。
none: 指定不进行缩放。

形式语法

scale = 
  none                              |
  [ <number> | <percentage> ]{1,3}

示例

HTML

html

<div>
  <p class="scale">Scaling</p>
</div>

CSS

css

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.scale {
  transition: scale 1s;
}

div:hover .scale {
  scale: 2 0.7;
}

结果

规范

规范
CSS Transforms Module Level 2 # individual-transforms

初始值	`none`
适用元素	可变换元素
是否是继承属性	否
计算值	as specified
动画类型	a transform
Creates stacking context	是

浏览器兼容性

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 2025年11月3日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题