本篇內(nèi)容主要講解“CSS3中的resize屬性怎么使用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“CSS3中的resize屬性怎么使用”吧!
創(chuàng)新互聯(lián)建站堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的靖州網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
CSS3新增了resize屬性,該屬性允許用戶通過拖動的方式來修改元素的尺寸。本來resize應(yīng)該翻譯為縮放,但在實際測試中通過resize屬性只可以在寬高基礎(chǔ)上實現(xiàn)拉伸效果,而無法實現(xiàn)縮放到小于寬高的效果。
[注意]IE瀏覽器不支持resize屬性。
resize與overflow關(guān)系緊密,只有當元素的overflow屬性值不是visible時,resize才會起作用
如textarea標簽中,Webkit內(nèi)核的瀏覽器會默認resize的值為both,即用戶可以調(diào)節(jié)元素的寬度和高度。如下圖就是在Google chrome中的textarea的默認顯示,textarea右下角有一個可以控制縮放的按鈕。
一般情況下,textarea是被固定寬度和高度的,如果你不愿意讓其任意縮放,你可以為textarea添加resize:none的css屬性。這樣就可以去除Webkit內(nèi)核的瀏覽器的默認顯示。
將textarea中resize的屬性值設(shè)置成vertical,這個是允許用戶只能調(diào)節(jié)高度,這樣頁面就不會變形了。
[注意]因為文本框本身就具有overflow:auto的屬性,所以自帶resize屬性
值: none | both | horizontal | vertical
初始值: none
應(yīng)用于: 塊級元素、替換元素、表單元格
繼承性: 無
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;">特殊要求請在這里中標明</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屬性怎么使用”有了更深的了解,不妨來實際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
當前題目:CSS3中的resize屬性怎么使用
轉(zhuǎn)載注明:http://muchs.cn/article36/iepcpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、定制網(wǎng)站、建站公司、網(wǎng)站設(shè)計、網(wǎng)站導航、微信公眾號
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)