CSS3 的縮放屬性,可以幫助我們方便地調(diào)整元素的大小。縮放可應(yīng)用于任何 HTML 元素,例如圖片,以及 SVG 文檔中的向量圖形。
縮放屬性有兩種:transform 和 zoom。transform 可以縮放元素的寬度和高度,而 zoom 只能縮放元素的內(nèi)容。
.transform { transform: scale(0.5); /* 縮小50% */ } .zoom { zoom: 2; /* 放大兩倍 */ }
在 transform 屬性中,我們可以設(shè)置一個縮放比例,它可以是一個小數(shù)或百分比。下面是一個 transform 縮放的例子,以將一個元素縮小為原來的一半:
.box { transform: scale(0.5); }
在 zoom 屬性中,我們可以設(shè)置一個放大比例,它必須是一個數(shù)字。下面是一個 zoom 放大的例子,它將一個元素的內(nèi)容放大兩倍:
.box { zoom: 2; }
需要注意的是,使用 transform 縮放會導(dǎo)致元素的布局位置發(fā)生變化,而使用 zoom 放大僅會放大元素的內(nèi)容,不會改變其布局。
使用縮放屬性可以在不改變 HTML 代碼的情況下,方便地調(diào)整元素的大小,使網(wǎng)頁布局更靈活。
上一篇css url沒用
下一篇css url傳圖片