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 屬性參數值

寬度值	語法	說明
none	resize:none;	預設值，瀏覽者不能調整 DIV 區塊的大小。
both	resize:both;	瀏覽者可以自行調整 DIV 區塊的寬度與高度
horizontal	resize:horizontal;	瀏覽者僅能自行調整 DIV 區塊的寬度
vertical	resize: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 屬性非常好用，不過還是要建議多找幾個瀏覽器做測試。

延伸閱讀