CSS3新增了resize属性，该属性允许用户通过拖动的方式来修改元素的尺寸。本来resize应该翻译为缩放，但在实际测试中通过resize属性只可以在宽高基础上实现拉伸效果，而无法实现缩放到小于宽高的效果。

　　[注意]IE浏览器不支持resize属性

resize

　　resize与overflow关系紧密，只有当元素的overflow属性值不是visible时，resize才会起作用

　　[注意]因为文本框本身就具有overflow:auto的属性，所以自带resize属性

　　值: none | both | horizontal | vertical

　　初始值: none

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

none: 用户无法调整元素尺寸

both: 用户可调整元素的宽度和高度

horizontal: 用户只可调整元素的宽度

vertical: 用户只可调整元素的高度

　　[注意]在win7下resize拖拽区域的大小是17px*17px，实际上它就是滚动条尺寸

CSS拉伸resize的更多相关文章

  1. CSS: The resize Property

    用户手动调节输入框样式: <!DOCTYPE html> <html> <head> <style> div { border: 2px solid; ...

  2. CSS学习目录

    前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进java ...

  3. CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

    本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...

  4. 学习CSS 笔记

    1.动态修改div的大小 Html: <div> Hello </div> css: div { resize:both; overflow:auto; } 2. box-si ...

  5. 使用CSS禁止textarea调整大小功能的方法

    这篇文章主要介绍了使用CSS禁止textarea调整大小功能的方法,禁止可以调整textarea大小功能的方法很简单,使用CSS的resize属性即可,需要的朋友可以参考下 如果你使用谷歌浏览器或火狐 ...

  6. CSS 随笔

    1.动态修改div的大小 Html: <div> Hello </div> css: div { resize:both; overflow:auto; } 2. box-si ...

  7. 认识CSS中高级技巧之用户界面样式

    前端之HTML,CSS(九) CSS高级技巧 CSS用户界面样式 用户界面样式指更改用户操作样式,如更改用户的鼠标样式.表单轮廓等. 鼠标样式cursor cursor属性具有属性值有:default ...

  8. H5 表单标签

    33-表单标签3 列表数据 注意点: 1.下拉列表不能输入内容, 但是可以直接在列表中选择内容 2.可以通过给option标签添加一个selected属性来指定列表的默认值 3.可以通过给option ...

  9. HTML基础【5】：表单标签

    表单标签 作用:用于收集用户信息,让用户填写.选择相关信息 格式: <from> 表单标签 </from> 注意事项: 所有的表单内容,都要写在form标签里面 form标签中 ...

随机推荐

  1. 模态窗口用webdriver定位不到，可用java+sikuli实现

    一.安装sikuli(参见:http://lijunwei1228ok.blog.163.com/blog/static/97383797201311279595821/) 1.官网:http://w ...

  2. 用Navicat Premium 远程连接oracle数据库

    1.安装Navicat Premium软件(我的是11.0.7版本)(假设安装路径为D:\NavicatLite\Navicat Premium) 2.下载 instantclient-basic-n ...

  3. 3.一起来学hibernate之配置文件2

    之前的映射文件配置都是简单的.基础的配置,只涉及到单个javabean,对于单个javabean的增删改查都能很好的.简单的去完成. 但是知道简单配置远远不够,并不能完成很多复杂的情况,比如对象与对象 ...

  4. (原创)Louis Aston Knight 的家(摄影，欣赏)

    本文图片转自腾讯文化:www.cal.qq.com 1.Abstract     记忆中的家,深情刻画. 2.Content 图1 图2 图3 图4 图5 图6 图7 图8 图9 图10 图10 图1 ...

  5. minigui编译

    1, libminigui修改单 file: src/kernel/desktop.c func: def_mouse_handler keywords: MSG_DT_RBUTTONUP break ...

  6. sql常见的面试题

    1.用一条SQL语句 查询出每门课都大于80分的学生姓名 name   kecheng   fenshu 张三     语文       81张三     数学       75李四     语文   ...

  7. PAT/查找元素习题集

    B1004. 成绩排名 (20) Description: 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. Input: 每个测试输入包含1个测试用例,格式为: 第1行: ...

  8. 【Win10 UWP】微信SDK基本使用方法和基本原理

    上回讲到,作为一个长期散播温暖,散播希望的小清新无公害WP开发者,继QQ SDK之后,又把UWP微信SDK这茬了结了,仅供学习交流. 1.安装微信SDK for UWP 微信官方此前明确说明短时间内暂 ...

  9. 使用https的HSTS需要注意的一个问题

    HSTS(HTTP Strict Transport Security) 简单来说就是由浏览器进行http向https的重定向.如果不使用HSTS,当用户在浏览器中输入网址时没有加https,浏览器会 ...

  10. drag & resize元素的jQuery实现

    有时项目中会遇到需要拖动元素.拖拽调整元素大小的需求.大部分时候都不想自己写一遍,因为已经有很多现成的例子了.例如jqueryui提供的drag和resize.但是仅仅是为了这么小一个功能就引入一个库 ...