CSS3 resize用户自由缩放元素属性笔记

原创 国哥笔记  2018-09-29 22:40  阅读 781 views 次

resize属性定义即用法

css3中,resize属性是用来定义用户是否可以自由缩放元素。通过resize属性,我们可以让用户通过拖动的方式来修改元素的大小,在一些场景中可以提高用户体验。

在resize属性出现之前,当然也可以实现同样的效果,但是费时费力,效率极低,会用到大量的脚本代码才能实现。出现resize属性后,要实现用户自由缩放某个元素容器,就非常的简单了,只要为元素设置resize属性就能实现;

注意:只有当元素的overflow属性值不为visible时,resize属性才会有效果。

 

resize属性语法格式

Css语法:resize: none / both / horizontal / vertical;

JavaScript 语法: object.style.resize="none / both / horizontal / vertical"

 

resize属性属性值说明

  • none:不允许用户调节元素的尺寸(默认);
  • both :用户可以调整元素的高度和宽度;
  • horizontal:用户可调整元素的宽度;
  • vertical:用户可调整元素的高度;

 

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 resize用户自由缩放元素属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{width:300px;border: 1px solid red;margin-top: 20px;overflow:auto;}
#a{resize:both;}
#b{resize:horizontal;}
#c{resize:vertical;}
</style>
</head>
<body>
<div id = "d">none:不允许用户调节元素的尺寸(默认)</div>
<div id = "a">both:用户可以调整元素的高度和宽度</div>
<div id = "b">horizontal:用户可调整元素的宽度</div>
<div id = "c">vertical:用户可调整元素的高度</div>
</body>
</html>

运行结果:

CSS3 resize用户自由缩放元素属性笔记

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-resize.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情