自由缩放属性resize
为了增强用户体验,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的更多相关文章
- 自由缩放属性-resize(禁止textarea的自由缩放尺寸功能)
resize:none|both|horizontal|vertical|inherit 可以用来改变元素的尺寸大小 用上这个属性后元素的有下脚会有一个小图标 拖它就可以了 但是我把resize:bo ...
- [jquery] 图片热区随图片大小自由缩放
在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...
- (一)自定义ImageView,初步实现多点触控、自由缩放
真心佩服那些一直专注于技术共享的大神们,正是因为他们无私的分享精神,我才能每天都有进步.近日又算是仔细学了android的自定义控件技术,跟着大神的脚步实现了一个自定义的ImageView.里面涉及到 ...
- opencv学习笔记——图像缩放函数resize
opencv提供了一种图像缩放函数 功能:实现对输入图像缩放到指定大小 函数原型: void cv::resize ( InputArray src, OutputArray dst, Size ds ...
- iOS导航栏自由缩放头像效果
效果图: 上代码: 先给一个self.navigationItem.titleView ,然后再放个ImangeView添加到titleView上: UIView *titleView = [[UIV ...
- 让低版本IE支持css3背景图片缩放属性background-size
IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...
- 原生js实现table表格列宽自由缩放
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...
- css3学习文档
什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...
- CSS3知识点整理(五)----响应式设计及其他属性
介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...
随机推荐
- 用介个新的blog咯..
之前csdn实在是太卡了.. 只要一写比较长的blog就卡的要死.. 转过来这吧,比较好吧.. 原blog地址 啊为啥域名叫darklove呢.. 这是很久之前创建的.. 简单来说是一个和clearl ...
- debian 安装svn apache 小记. AuthzSVNAccessFile 不生效问题.
docker 使用docker镜像搭建svn+Apache环境 https://my.oschina.net/u/2006667/blog/637882 1,安装 apache ,svnapt-get ...
- UML图示说明
UML图示说明 继承:实线空三角形箭头指向父类 接口:虚线空三角形箭头指向接口 关联:实线无箭头方指向拥有者 聚合:实线空心菱形箭头指向整体,部分可以单独存在 组合:实线菱形指向整体,部分不能单独存在 ...
- 手动安装配置mongodb
2.1查看当前操作系统版本 2.2下载mongodb安装包 我的下载路径:http://www.mongodb.org/downloads 注意这里要下载和操作系统匹配的版本,因为我的系统是32位的, ...
- 几款不错的VisualStudio2010插件
1.Gradient Selection 这个插件能使VisualStudio的高亮文本看起来是类似Blend的那样的效果,看起来更加舒服 2.LineAdornments 这个插件可以高亮光标所在的 ...
- Canvas里绘制矩阵文字
效果如下 实现方法: [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1 ...
- 国家以及国家语言的json数据格式,提供给网友参考。
目前接触到一个需求,需要全球主要国家的选择以及语言的选择,如下图: 这是国家选项 这是语言的选项: 很简单有木有? 本来打算直接给文件,但是好像没有文件上传,所以就提供一个思路和代码,你们照着弄吧. ...
- PHP while使用
$i = 0; while(true){ if($i == 0){ $i++; continue; }else if($i > 10){ break; }else{ echo $i." ...
- 通过版本号实现乐观锁(MVCC)
乐观锁大多是基于数据版本记录的机制实现 , 如 , 为每一行数据增加一个整型版本标识(version) , 每次数据更新都把版本号+1 工作原理:读取出数据时,将此版本号一同读出,之后更新时,对此版本 ...
- 去掉无用的多余的空格(string1.前后空格,2.中间空格)
1.使用NSString中的stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]]方法只是去掉左右两边的空格: ...