CSS3中的resize屬性怎么使用

本篇內容主要講解“CSS3中的resize屬性怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS3中的resize屬性怎么使用”吧!

CSS3新增了resize屬性，該屬性允許用戶通過拖動的方式來修改元素的尺寸。本來resize應該翻譯為縮放，但在實際測試中通過resize屬性只可以在寬高基礎上實現拉伸效果，而無法實現縮放到小于寬高的效果。

[注意]IE瀏覽器不支持resize屬性。

resize與overflow關系緊密，只有當元素的overflow屬性值不是visible時，resize才會起作用

如textarea標簽中，Webkit內核的瀏覽器會默認resize的值為both，即用戶可以調節元素的寬度和高度。如下圖就是在Google chrome中的textarea的默認顯示，textarea右下角有一個可以控制縮放的按鈕。

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

將textarea中resize的屬性值設置成vertical，這個是允許用戶只能調節高度，這樣頁面就不會變形了。

[注意]因為文本框本身就具有overflow:auto的屬性，所以自帶resize屬性

值: none | both | horizontal | vertical

初始值: none

應用于: 塊級元素、替換元素、表單元格

繼承性: 無

none: 用戶無法調整元素尺寸
both: 用戶可調整元素的寬度和高度
horizontal: 用戶只可調整元素的寬度

比如：

<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;">特殊要求請在這里中標明</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;">特殊要求請在這里中標明</textarea>

到此，相信大家對“CSS3中的resize屬性怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！