我們在進行網(wǎng)頁設計時，都需要考慮到用戶體驗方面。那么我們都知道CSS是用于控制網(wǎng)頁的樣式和布局的。而CSS3 就是最新的 CSS 標準。

在css3中我們可以發(fā)現(xiàn)一些新屬性，這些屬性很大方面得提高了用戶體驗，比如新增的resize屬性。

推薦參考相關視頻教程：《CSS3教程》

下面我們結合具體的代碼示例為大家詳細介紹css3中resize屬性的作用。

 !DOCTYPE html  html  head  meta charset= utf-8  title css3中resize屬性的用法示例 /title  style  border:3px solid #ff3844; padding:10px 20px; width:200px; resize:both; overflow:auto; /style  /head  body  div css3中resize屬性的作用：能夠規(guī)定用戶是否可以自由調整元素的尺寸！ /div  /body  /html 

通過瀏覽器訪問，最終效果如下圖：

上述代碼大家可以直接復制粘貼到本地進行測試，這里我們給div添加resize屬性，并且設置值為both。

當我們鼠標拖動右下角處，可以發(fā)現(xiàn)邊框元素和文字元素都自由的發(fā)生縮放，無論是沿著水平方向還是垂直方向，都能根據(jù)我們的要求進行文本域尺寸的變化。這里也就說明resize屬性可以用來改變元素尺寸大小。

同時需要注意的是，當我們不給這個div添加overflow屬性時，盡管有resize屬性，都不會有任何效果的，大家可以本地測試下。所以只有同時設置overflow和resize屬性時，resize屬性才會有作用，當然overflow值可以是 auto、hidden 或者 scroll。

下面給大家總結下resize可選值：

本篇文章就是關于css3中resize屬性的作用詳解，非常簡單易懂，希望對需要的朋友有所幫助！

以上就是css3中resize屬性的作用詳解（附代碼）的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。