css3中resize属性的作用详解（附代码）
发布时间：09/01 来源：未知 浏览：
关键词：
我们在停止网页设计时，都需要思考到会员体验方面。那么我们都知道CSS是用于操纵网页的样式和规划的。而CSS3 就是最新的 CSS 标准。
在css3中我们可以发明一些新属性，这些属性很大方面得提高了会员体验，比方新增的resize属性。
引荐参照 相关视频教程：《CSS3教程》
下面我们结合详细的代码示例为大家具体介绍css3中resize属性的作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3中resize属性的用途示例</title>
<style>
div
{
border:3px solid #ff3844;
padding:10px 20px;
width:200px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<div>css3中resize属性的作用：能够规定会员可否可以自在调整元素的尺寸！</div>
</body>
</html>通过阅读器拜访，终究结果如下图：
上述代码大家可以直接复制粘贴到当地停止测试，这里我们给div增加resize属性，并且设定值为both。
当我们鼠标拖动右下角处，可以发明边框元素和文字元素都自在的发生缩放，不管是沿着水平标的目的还是垂直标的目的，都能按照我们的要求停止文本域尺寸的转变。这里也就说明resize属性可以用来改动元素尺寸大小。
同时需要留意的是，当我们不给这个div增加overflow属性时，尽管有resize属性，都不会有任何结果的，大家可以当地测试下。所以只要同时设定overflow和resize属性时，resize属性才会有作用，当然overflow值可以是 auto、hidden 或者 scroll。
下面给大家总结下resize可选值：
| 设定none表示会员不克不及调整元素的尺寸。 |
| 设定both表示会员可以调整元素的高度和宽度。 |
| 设定horizontal表示会员可以调整元素的宽度。 |
| 设定vertical表示会员可以调整元素的高度。 |
本篇文章就是关于css3中resize属性的作用详解，非常简便易懂，但愿对需要的伴侣有所帮忙！
以上就是css3中resize属性的作用详解（附代码）的具体内容，更多请关注百分百源码网其它相关文章！
