CSS3的resize属性使用初探


Posted in HTML / CSS onSeptember 27, 2015

语法:
resize:none | both | horizontal | vertical
默认值:none
适用于:所有设置了overflow除了visible之外的元素
继承性:无
取值:
none:
不允许用户调整元素大小。
both:
用户可以调节元素的宽度和高度。
horizontal:
用户可以调节元素的宽度
vertical:
用户可以调节元素的高度。
说明:
设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。
如果希望此属性生效,需要设置对象的overflow属性,值可以是auto,hidden或scroll。
对应的脚本特性为resize。

为了增强用户体验,CSS 3增加了很多新的属性,其中一个重要的属性就是resize,它允许用户通过拖动的方式来修改元素的尺寸。

样例代码:

CSS Code复制内容到剪贴板
  1. .box {   
  2.     width600px;   
  3.     height300px;   
  4.     border1px solid #000;   
  5.     resize: both;   
  6.     overflowauto;   
  7. }  

样例图片:

CSS3的resize属性使用初探

HTML / CSS 相关文章推荐
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 #HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 #HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 #HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 #HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 #HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 #HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 #HTML / CSS
You might like
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php处理带有中文URL的方法
2016/07/11 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
苹果音乐订阅:Apple Music
2018/08/02 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
应届生找工作求职信
2014/06/24 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
社区服务理念口号
2015/12/25 职场文书
银行工作心得体会范文
2016/01/23 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers