scale
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.
CSS 属性 scale
允许你可以分别且独立地指定 CSS 属性 transform
缩放的比例。这更好地映射到典型的 UI(用户界面)用法中,并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。
语法
css
/* 关键值 */
scale: none;
/* 单个值 */
/* 设定比 1 大的数值使该元素变大 */
scale: 2;
/* 设定比 1 小的数值使该元素缩小 */
scale: 0.5;
/* 两个值 */
scale: 2 0.5;
/* 三个值 */
scale: 2 0.5 2;
取值
形式语法
示例
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;
}
结果
规范
Specification |
---|
CSS Transforms Module Level 2 # individual-transforms |
初始值 | none |
---|---|
适用元素 | 可变换元素 |
是否是继承属性 | 否 |
计算值 | as specified |
动画类型 | a transform |
Creates stacking context | 是 |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scale | ||||||||||||
none |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.