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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python机器学习库常用汇总
2017/11/15 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python unittest单元测试框架总结
2018/09/08 Python
python根据url地址下载小文件的实例
2018/12/18 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
关于颐和园的导游词
2015/01/30 职场文书
vue动态绑定style样式
2022/04/20 Vue.js