为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止,可以使用overflow属性的任何容器元素。

在此之前,Web设计师为了要实现这样具有拖动效果的UI,使用大量的脚本代码才能实现,这样费时费力,效率极低。

resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。但使用方法却是极其的简单,先从其语法入手。

resize: none | both | horizontal | vertical | inherit

取值说明:

属性值

取值说明

none

用户不能拖动元素修改尺寸大小。

both

用户可以拖动元素,同时修改元素的宽度和高度

horizontal

用户可以拖动元素,仅可以修改元素的宽度,但不能修改元素的高度。

vertical

用户可以拖动元素,仅可以修改元素的高度,但不能修改元素的宽度。

inherit

继承父元素的resize属性值。

例如:通过resize属性,让文本域可以沿水平方向拖大。代码为:

textarea {
-webkit-resize: horizontal;
-moz-resize: horizontal;
-o-resize: horizontal;
-ms-resize: horizontal;
resize: horizontal;
}

自由缩放属性resize的更多相关文章

  1. 自由缩放属性-resize(禁止textarea的自由缩放尺寸功能)

    resize:none|both|horizontal|vertical|inherit 可以用来改变元素的尺寸大小 用上这个属性后元素的有下脚会有一个小图标 拖它就可以了 但是我把resize:bo ...

  2. [jquery] 图片热区随图片大小自由缩放

    在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...

  3. (一)自定义ImageView,初步实现多点触控、自由缩放

    真心佩服那些一直专注于技术共享的大神们,正是因为他们无私的分享精神,我才能每天都有进步.近日又算是仔细学了android的自定义控件技术,跟着大神的脚步实现了一个自定义的ImageView.里面涉及到 ...

  4. opencv学习笔记——图像缩放函数resize

    opencv提供了一种图像缩放函数 功能:实现对输入图像缩放到指定大小 函数原型: void cv::resize ( InputArray src, OutputArray dst, Size ds ...

  5. iOS导航栏自由缩放头像效果

    效果图: 上代码: 先给一个self.navigationItem.titleView ,然后再放个ImangeView添加到titleView上: UIView *titleView = [[UIV ...

  6. 让低版本IE支持css3背景图片缩放属性background-size

    IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...

  7. 原生js实现table表格列宽自由缩放

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

  8. css3学习文档

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

  9. CSS3知识点整理(五)----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

随机推荐

  1. java-集合1

    浏览以下内容前,请点击并阅读 声明 集合(collection),可以看做一个容器,是将多个元素组合成一个单位的对象.集合用来存储,检索,操作,交互一些聚集的数据.通常,集合用来表示一个组的数据,就像 ...

  2. 如何使用ArcGIS Online的地图数据作为底图

    1.添加数据-GIS服务器 2.选择添加ArcGIS Server 3.使用GIS服务,下一步 4.输入url为http://cache1.arcgisonline.cn/ArcGIS/service ...

  3. JavaScript中的this指向

    this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...

  4. [BZOJ4027][HEOI2015] 兔子与樱花

    Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接 ...

  5. poj2689Prime Distance 素数测试

    朴素素数测试是O(x1/2)的,每一个数都测试下来就炸了 然而如果全部预处理的话才是做大死,时间空间各种炸(大约有1亿个数) 所以怎么平衡一下呢? 其实在预处理的时候可以只处理一半:把21474836 ...

  6. Multiple annotations found at this line

    Multiple annotations found at this line 在使用MyEclipse的时候,通过MVN导入项目时候,webapp下面的JSP页面报了如下的错误: 这种情况通常的原因 ...

  7. 运用ASP.NET实现

    calation.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; /// ...

  8. Ubuntu不显示壁纸,桌面右键无反应解决

    用ubuntu tweak调整ubuntu的桌面图标显示,导致桌面无法显示壁纸,桌面点击右键无发应。 解决办法:Ubuntu Tweak中“调整”选项卡-》”显示桌面图标“的选项一定要打开,处于ON状 ...

  9. RCurl getURL()函数做debug

    getURL()函数做获取网页做debug,三步骤 1.首先创建一个对象debugGatherer(),该对象包含三个函数:(update(), value(), reset()); R> de ...

  10. Codeforces Round #384 (Div. 2) ABCD

    一场比较简单的div2 电脑出了点问题 所以在比赛中理论ac了ACD 除了爆int这种事情之外.. A 一个人想从a到b 移动的花费这么定义 如果初始点和到达点类型相同 就不花钱 反之花距离差的绝对值 ...