`

css3自由缩放resize

    博客分类:
  • CSS3
 
阅读更多

      resize属性主要是用来改变元素尺寸大小的,允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小,主要目的是增强用户体验。适用于:可以使用overflow属性的任何容器元素。

resize: none | both | horizontal | vertical | inherit

 

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

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

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

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

inherit继承父元素的resize属性值。

 

<style type="text/css">
textarea{
  resize:horizontal;
}
</style>
<textarea name="" id="" cols="30" rows="10"></textarea>

 

 

分享到:
评论

相关推荐

    简单掌握CSS3中resize属性的用法

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

    CSS和CSS3思维导图(xmind版)

    resize(元素缩放):指定一个div元素,允许用户调整大小 outline(外边框) background-origin(指定背景图片从哪里开始显示) background-clip(指定背景图片从什么位置开始裁切)  background(为一个元素指定多个背景...

    CSS3的resize属性使用初探

    语法:resize:none | both | horizontal | vertical默认值:none适用于:所有设置了overflow除了visible之外的元素继承性:无取值:none:不允许用户调整...为了增强用户体验,CSS 3增加了很多新的属性,其中一个重要

    vue-drag-resize-rotate:vueComponent拖动,调整大小和旋转

    目前仅支持 pc 端、px 的 css 单位;后续添加移动端和 rem 自适应; 组件仅实现最基本的拖拽、缩放和旋转核心功能,源码简单清晰可解耦,有较高的扩展性 演示(Demo) 版本(Version) 目前最新版本为 1.0.12 安装...

    DivingCub#Web-Series#响应式布局与自动缩放1

    Auto Resize: 自动缩放CSS Responsive Grid SystemFlexbox: 动态分配空间Proportional Scale: 按比

    Jquery+css 网页背景自适应浏览器大小的代码

    代码可以让网页的背景图片可以自适应浏览器分辨率的大小缩放, 始终保持可以看到全部的背景。而不是一般的做法,超过的背景隐藏不显示。

    vue的可拖动,可调整大小和可旋转的组件-JavaScript开发

    yoyoo-ddr演示应用程序安装npm i yoyoo-ddr --save用法从'yoyoo-ddr'导入DDR导入'yoyoo-ddr / dist / yoyoo-ddr.css'导出默认值{data(){返回{yoyoo-ddr演示演示在线应用程序社区的安装npm i yoyoo-ddr --save用法...

    easy-image-resizer:在“浏览器”,“节点”和“ CLI”中一行调整图像大小的简单方法

    简单的图像缩放器 在browser , node和CLI方便地在一行中调整图像大小的方法。 用法 类似CSS的尺寸定义。 export type ResizeImageOptions = { width ?: number , height ?: number , maxWidth ?: number , ...

    dreamweaver的各种组件

    Background_that_fit 不论怎样缩放窗口背景图片总是和窗口一样大 Basetarget 设定页面的的base URL Timestamp 为页面加上时间戳,这下最新更动时间不用每次再自己写了 guestbook-o-matic 不用cgi制作自己的留言本 ...

    image-map-resizer:响应式HTML图像映射

    您可以选择传递一个CSS选择器,该选择器返回地图标签的集合,例如“ map.myMap”。 或直接引用DOM中的地图对象。 此函数返回已绑定到的地图元素数组。 jQuery用法 包括和脚本,然后将以下调用添加到页面底部: $ ...

    js使用小技巧

    &lt;body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"&gt; 无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert...

Global site tag (gtag.js) - Google Analytics