您现在的位置是：网站首页> 编程资料编程资料

CSS3的resize属性使用初探简单掌握CSS3中resize属性的用法CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)

2023-10-23 225人已围观

简介 这篇文章主要介绍了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复制内容到剪贴板
  1. .box {   
  2.     width: 600px;   
  3.     height: 300px;   
  4.     border: 1px solid #000;   
  5.     resize: both;   
  6.     overflow: auto;   
  7. }  


样例图片：

上一篇：在IE浏览器下出发CSS的haslayout属性hasLayOut与css属性的关系介绍hasLayout引发的CSS Bug表CSS haslayout 彻底了解

下一篇：CSS实现菜单背景自适应宽度的方法纯CSS+XHTML实现的二级导航菜单效果CSS基于单张背景图实现自适应宽度的圆角菜单效果代码纯CSS实现的三级导航菜单效果代码基于CSS实现的4级下拉菜单效果代码纯CSS实现超简单的二级下拉导航菜单代码CSS实现的中英文双语菜单效果代码CSS实现带有小图片的LI图标列表菜单CSS实现有立体感的横向按钮式菜单效果代码纯CSS实现鼠标滑过显示子菜单的二级菜单效果CSS实现的灰色下拉菜单效果代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网