代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 resize调整大小</title>
<style>
.box {
/*是否可由用户调整元素的尺寸：用户可调整元素的高度和宽度*/
resize: both;
width: 400px;
height: 400px;
border: 1px solid #000;
overflow: auto;
}
img {
width: 200px;
height: 200px;
box-sizing: border-box;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"><img src="images/bg.jpg" alt="">
<p>css3中，resize属性指定一个元素是否应该由用户去调整大小。这个div元素由用户调整大小。</p></div>
</body>
</html>
上述代码中：
第7~14行代码定义了.box的样式，
第9行代码将resize的值设置为both，表示可以调整.box盒子的宽度和高度；
第15~20行代码定义了图片的样式；
第25~26行代码定义了图片和文字的页面结构。
运行效果
将鼠标指针移到右下角的位置，然后，按住鼠标左键向左或向右拖动，.box的宽度和高度将会发生改变。
在CSS3中，resize属性指定一个元素是否应该由用户去调整大小。其取值有none（默认值，用户无法调整元素的尺寸）、both（用户可调整·元素的高度和宽度）、horizontal（用户可调整元素的宽度）和vertical（用户可调整元素的高度）。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
