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

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的靖州網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

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é)高度，這樣頁面就不會(huì)變形了。

[注意]因?yàn)槲谋究虮旧砭途哂衞verflow:auto的屬性，所以自帶resize屬性

值: none | both | horizontal | vertical

初始值: none

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

繼承性: 無

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

比如：

特殊要求請(qǐng)?jiān)谶@里中標(biāo)明  
特殊要求請(qǐng)?jiān)谶@里中標(biāo)明

到此，相信大家對(duì)“CSS3中的resize屬性怎么使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！