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 属性