CSS scale() 函数
定义和用法
CSS 的 scale() 函数用于缩放元素(宽度和高度)。
scale() 函数定义了元素在 x 和 y 方向上的缩放值。
scale() 函数在 transform 属性中使用。
实例
例子 1
使用 scale() 缩放多个 <div> 元素:
#myDiv1 {
transform: scale(0.7);
}
#myDiv2 {
transform: scale(110%);
}
#myDiv3 {
transform: scale(1.1, 0.5);
}
例子 2
使用 scale() 缩放图像:
#img1 {
transform: scale(0.7);
}
#img2 {
transform: scale(110%);
}
#img3 {
transform: scale(1.1, 0.5);
}
CSS 语法
scale(sx, sy)
| 值 | 描述 |
|---|---|
| sx | 必需。数字或百分比。指定宽度的缩放向量。 |
| sy |
可选。数字或百分比。指定高度的缩放向量。 如果省略,则值设置为与 sx 相同。 |
技术细节
| 版本: | CSS Transforms Module Level 1 |
|---|
浏览器支持
表格中的数字表示首个完全支持该函数的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1 | 12 | 3.5 | 3.1 | 10.5 |
相关页面
教程:CSS 2D 变换
参考:CSS scale 属性