您好,登錄后才能下訂單哦!
本篇文章為大家展示了CSS3中resize屬性如何使用,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
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)整元素的寬度
比如:
<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>
上述內(nèi)容就是CSS3中resize屬性如何使用,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。