CSS 自由缩放 resize属性

为了增强用户体验，CSS3新增的一个非常实用的 resize属性，它允许用户通过拖动的方式，来自由缩放元素的尺寸。这在以前只能通过Javascript 编写大量脚本来实现，费时费力，效率低下。

resize属性的可选值有 none | both | horizontal | vertical，默认值为 none。none 表示不允许用户调整元素的尺寸；both 表示用户可以调整元素的宽度和高度；horizontal 表示用户仅可以调整元素的宽度；vertical 表示用户仅可以调整元素的高度。如：

div {
margin: 20px auto;
border:1px solid #444;
width: 120px;
height: 120px;
overflow: auto;
resize: both;
}

上述代码的运行结果如图 4‑72 所示：

图4-72 resize属性效果

从上图可以看出，定义了resize属性后，元素的右下角会出现允许拖动的标志，用户可以点中右下角进行拖动，来随意改变元素的尺寸。

需要注意的是，resize属性主要用于可以使用 overflow 属性的任何元素。所以，必须为元素定义 overflow 属性，否则，resize属性无效，元素的尺寸不允许改变。

在使用 resize属性调整元素的尺寸时，建议配合 cursor 属性使用，通过相应的鼠标样式，来增强用户体验。如，resize: both 时使用 cursor: se-resize，resize: horizontal 时使用 cursor: ew-resize，resize: vertical 时使用 cursor: ns-resize。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 自由缩放 resize属性相关推荐

CSS中的resize属性
CSS | 调整属性 (CSS | resize Property) Starting note: 开始说明: We deal with various elements regularly whil ...
纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制. webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar ...
CSS resize属性
前言之前写了一篇通过指令实现element弹窗的全屏与移动,但是关于拖拽放大的功能一直没有特别好的思路直到看到了下面的这篇文章: CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预 ...
【CSS 遮挡和剪切属性 Masking】
CSS 遮挡和剪切属性 Masking CSS 遮挡和剪切属性 Masking 1. CSS Masking 的基本概念 2. clip 属性: 设置绝对/固定定位元素的可见区域 (可指定四条 ...
双18期|CSS揭秘之简写属性
theme: channing-cyan highlight: a11y-dark 双18期|CSS揭秘之简写属性 tips:每个技术点都值得优学优写:18期一.写在前面 css 简写属性了解吗?前 ...
css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
CSS基础之背景属性设置
CSS设置背景,不但包括背景的颜色,还包括背景图片等设置,还是老规矩演示比较靠谱. 背景背景颜色背景颜色和文本颜色不同,一个是设置的是文本的颜色,一个是背景的颜色.使用的是backgrou-col ...
html scale属性,CSS中的zoom属性和scale属性的用法及区别
CSS中的zoom属性和scale属性的用法及区别 CSS中的zoom属性和scale属性的用法及区别是什么呢?以下是小编整理的相关内容,欢迎阅读学习! zoom 属性语法: zoom:normal ...
便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}
便利贴--12{酷炫背景,小球随鼠标移动,可自由设置小球属性} html 资源下载 0积分 html 之前做的拿出来分享下 <!DOCTYPE html> <html>< ...

CSS 自由缩放 resize属性

CSS 自由缩放 resize属性相关推荐

最新文章

热门文章