CSS3新增了resize屬性，該屬性允許用戶通過(guò)拖動(dòng)的方式來(lái)修改元素的尺寸。本來(lái)resize應(yīng)該翻譯為縮放，但在實(shí)際測(cè)試中通過(guò)resize屬性只可以在寬高基礎(chǔ)上實(shí)現(xiàn)拉伸效果，而無(wú)法實(shí)現(xiàn)縮放到小于寬高的效果。

resize與overflow關(guān)系緊密，只有當(dāng)元素的overflow屬性值不是visible時(shí)，resize才會(huì)起作用

如textarea標(biāo)簽中，Webkit內(nèi)核的瀏覽器會(huì)默認(rèn)resize的值為both，即用戶可以調(diào)節(jié)元素的寬度和高度。如下圖就是在Google chrome中的textarea的默認(rèn)顯示，textarea右下角有一個(gè)可以控制縮放的按鈕。

一般情況下，textarea是被固定寬度和高度的，如果你不愿意讓其任意縮放，你可以為textarea添加resize:none的css屬性。這樣就可以去除Webkit內(nèi)核的瀏覽器的默認(rèn)顯示。

將textarea中resize的屬性值設(shè)置成vertical，這個(gè)是允許用戶只能調(diào)節(jié)高度，這樣頁(yè)面就不會(huì)變形了。

值: none | both | horizontal | vertical

初始值: none

應(yīng)用于: 塊級(jí)元素、替換元素、表單元格

繼承性: 無(wú)

none: 用戶無(wú)法調(diào)整元素尺寸
both: 用戶可調(diào)整元素的寬度和高度
horizontal: 用戶只可調(diào)整元素的寬度

比如：

CSS Code復(fù)制內(nèi)容到剪貼板

<textarea name="Remarks" rows="2" cols="20" id="Remarks" class="textBox" onfocus="this.className=’textBoxOver’;myfocus()"  
                      onblur="this.className=’textBox’;myblur();"  
  
    style="height: 60px; width: 86%;max-height: 60px;max-width:420px; resize=none;">特殊要求請(qǐng)?jiān)谶@里中標(biāo)明</textarea>  

<textarea name="Remarks" rows="2" cols="20" id="Remarks" class="textBox" onfocus="this.className=’textBoxOver’;myfocus()"
onblur="this.className=’textBox’;myblur();"

style="height: 60px; width: 86%;max-height: 60px;max-width:420px; resize=none;">特殊要求請(qǐng)?jiān)谶@里中標(biāo)明</textarea>