CSS3 resize 屬性

CSS3 resize 屬性的功能是讓網頁的使用者可以自行調整div區塊元素的大小,讓傳統只能固定的 DIV 區塊有了可調整的功能,網頁設計師可以利用CSS3 resize 屬性的功能,開放 DIV 區塊可以調整的範圍,例如可以調整寬度與高度、只能調整寬度或只能調整高度,網頁設計師可以根據網頁功能上的需求,做有限度的開放,這就是 CSS3 resize 屬性的主要功能,不過有部分的瀏覽器並不支援 CSS3 resize 屬性的效果,因為這是 CSS3 的新功能,建議各位網頁設計師在採用主題的時候多找幾個瀏覽器測試效果。

2015/5/11 測試,支援 CSS3 resize 屬性的瀏覽器包含 FireFox, Chrome, Opera, Safari 等,不過都必須搭配 overflow 屬性才能正常運作,至於 IE11 還是不支援。

CSS3 resize 屬性語法
resize: 參數值;
CSS3 resize 的參數值即為控制是否要開放所能調整的範圍,整理如下表:

CSS3 resize 屬性參數值
寬度值語法說明
noneresize:none;
預設值,瀏覽者不能調整 DIV 區塊的大小。
bothresize:both;
瀏覽者可以自行調整 DIV 區塊的寬度與高度
horizontalresize:horizontal;
瀏覽者僅能自行調整 DIV 區塊的寬度
verticalresize:vertical;
瀏覽者僅能自行調整 DIV 區塊的高度
CSS3 resize 屬性範例
<div style="border:2px #ccc solid;padding:30px; width:380px;resize:both;overflow:auto;">
測試將 CSS3 的 resize 屬性套用至 DIV 區塊的效果
</div>
範例的輸出效果(DIV 區塊右下角有個可拉動的符號)
測試將 CSS3 的 resize 屬性套用至 DIV 區塊的效果
範例的 DIV 區塊預設寬度為 380px,我們替這個 DIV 區塊加上「resize:both;」的語法,讓瀏覽者可以自行調整 DIV 區塊的寬度與高度,這裡我們同時使用了「overflow:auto;」的語法,這樣 resize 的效果才會顯現出來,如果你的 DIV 區塊有需要讓網友拉動變大或縮小,CSS3 resize 屬性非常好用,不過還是要建議多找幾個瀏覽器做測試。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012