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