为了增强用户体验, CSS3 增加了很对的新属性, 其中一个重要的属性就是 resize, 它允许用户通过拖动的方式改变元素的尺寸, 到目前为止, 主要用于可以使用 overtflow 属性的任何容器元素中
resize:none | bth |Horizontal | vertival | inherit
none: 浏览器不提供尺寸凋整机制, 用户不能操作机制调解的高度和宽度
both: 浏览器提供双向尺寸凋整机制, 允许用户调节元素的宽度和高度.
Horizontal: 浏览器提供单向水平调节机制, 允许用户调节元素的宽度.
vertical: 浏览器提供单向垂直调节机制, 允许用户调节元素的高度.
目前吃了 IE 浏览器外, 其他最新版主流浏览器都允许元素的缩放, 但尚未完全支持.
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- </head>
- <body>
- <style>
- .box{
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- border: 3px solid green;
- }
- .p{
- width: 10px;
- height: 20px;
- border: 1em solid black;
- resize: both;
- overflow: auto;
- /* 必须同时定义 overflow 和 redize, 否则 redize 属性声明无效, 元素默认溢出显示 visible */
- box-sizing: initial;
- }
- </style>
- <div class="p">
你好世界
- </div>
- <div class="box">
- <p > 你好世界 </p>
- </div>
- <script>
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3003904.html