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 相关文章推荐
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 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
自制PHP框架之设计模式
2017/05/07 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python fabric使用笔记
2015/05/09 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python字符串常用方法
2018/06/14 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
文员岗位职责
2013/11/09 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
益达广告词
2014/03/14 职场文书
霸气队列口号
2014/06/18 职场文书
作风年建设汇报材料
2014/08/14 职场文书
个人查摆剖析材料
2014/10/04 职场文书
体育教师个人工作总结
2015/02/09 职场文书
2015年电工工作总结
2015/04/10 职场文书
培训班通知
2015/04/25 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang