在css中,可以利用transform屬性來縮放div元素,當該屬性的值為「scale(x,y)」時,就可以對元素進行縮放轉換,語法為「transform:scale(橫向縮放比例,垂直縮放比例);」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
css如何縮放div元素
我們可以透過transform屬性來對div元素進行縮放的操作,當transform屬性的值設定為「scale(x,y)」時,表示我們可以對div元素進行2D縮放轉換。
下面我們透過範例來看一下怎麼樣對div進行縮放,範例如下:
<!DOCTYPE html> <html> <head> <style> .no{ width:300px; height:100px; background-color:#ff9900; } .yes{ width:300px; height:100px; background-color:#ff9900; transform:scale(0.5,0.5); } </style> </head> <body> <p>没缩放的div元素:</p> <div class="no"></div> <p>缩放的div元素:</p> <div class="yes"></div> </body> </html>
輸出結果:
(學習視頻分享:css影片教學)
以上是css如何縮放div元素的詳細內容。更多資訊請關注PHP中文網其他相關文章!