您现在的位置是：网站首页> 编程资料编程资料
CSS3的resize属性使用初探简单掌握CSS3中resize属性的用法CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021-09-05
910人已围观
简介 这篇文章主要介绍了CSS3的resize属性使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
语法：
resize：none | both | horizontal | vertical
默认值：none
适用于：所有设置了overflow除了visible之外的元素
继承性：无
取值：
none：
不允许用户调整元素大小。
both：
用户可以调节元素的宽度和高度。
horizontal：
用户可以调节元素的宽度
vertical：
用户可以调节元素的高度。
说明：
设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
对应的脚本特性为resize。
为了增强用户体验，CSS 3增加了很多新的属性，其中一个重要的属性就是resize，它允许用户通过拖动的方式来修改元素的尺寸。
样例代码：
CSS Code复制内容到剪贴板
- .box {
- width: 600px;
- height: 300px;
- border: 1px solid #000;
- resize: both;
- overflow: auto;
- }
样例图片：
相关内容
- 在IE浏览器下出发CSS的haslayout属性hasLayOut与css属性的关系介绍hasLayout引发的CSS Bug表CSS haslayout 彻底了解
- 浅谈CSS编程中的怪异模式CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS字体属性全解析详解CSS中的字体属性的使用CSS 字体属性font相关的用法CSS 表单元素不继承body的字体属性
- 简单介绍CSS hack的使用CSS Hack详解CSS浏览器兼容性Hack大全CSS Hack技术介绍及常用的Hack技巧集锦
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10浅谈前端制作中，IE6还有必要兼容吗使用语义化标签去写你的HTML 兼容IE6,7,8让IE6支持兼容min-width、max-width CSS样式属性的方法兼容IE6、IE7的min-width、max-width写法Css样式兼容IE6,IE7,FIREFOX的浏览器的写法示例介绍兼容IE6的min-width、min-height的简单方法
- 移动端网页解决CSS的active伪类无效的方法CSS :active 伪类 元素被激活时的样式 a标签的四个css伪类(link、visited、hover、active)样式理解
- 简析CSS表达式attr()的运用CSS计数器counter()的用法简介进一步理解CSS编程中的块级元素和行内元素
- CSS计数器counter()的用法简介通过CSS3的object-fit来调整图片适配尺寸的技巧简介CSS中的伪元素简介简介CSS中的各种选择符Markdown.css样式简介CSS3 Columns分列式布局方法简介定义css设备类型-Media Queries图表简介及使用方法css3背景图片透明叠加属性cross-fade简介及用法实例
- 进一步理解CSS编程中的块级元素和行内元素对行内元素和块级元素的一些认识浅谈CSS块级元素与行内元素(内联元素)的区别和联系 CSS行内元素和块级元素的居中实例分析全面了解行内元素与块级元素的区别
- 纯CSS+XHTML实现的二级导航菜单效果纯CSS实现超简单的二级下拉导航菜单代码一款纯css3实现的竖形二级导航的实例教程实列教程 一款基于jquery和css3的响应式二级导航菜单一款纯css实现的漂亮导航菜单(也适用于个人中心)简单的二级菜单导航实现css代码CSS3 二级导航菜单的制作的示例
