CSS3实战之resize

resize属性可以设置是否允许用户缩放网页中元素的大小

总共有4种取值

none

vertical

horizontal

both

举个栗子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resize</title>
<style type="text/css">
#resize {
    background:url(images/img19.jpg) no-repeat center;
    -moz-background-clip:content;
    -webkit-background-clip:content;
    background-clip:content;
    width:200px;
    height:120px;
    max-width:800px;
    max-height:600px;
    padding:6px;
    border: 1px solid red;
    resize: both;
    overflow: auto;
}
</style>
</head>

<body>
<div id="resize"></div>
</body>
</html>

记得定义最大尺寸,把缩放控制在一定范围之内。

时间: 2024-12-27 03:10:05

CSS3实战之resize的相关文章

【01】《响应式Web设计:HTML5和CSS3实战》

[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(非扫描版)(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局,用了一个例子来讲解.后半部分讲了一些CSS3的新属性.阴影,transform,transition等. [英]ben frain 著 王永强 译

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教程.因为在今天这篇教程中,我会用另一个思维方式来思考问题,我

CSS3实战开发:手把手教你鼠标滑动特效开发

各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解.有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手.请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程. 今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画: 你有没有觉得上面的这个特效很棒呢! 好,现在咱们就开始分步骤实战开发这个动画特效吧: 首先,我们先准备好html页面代码: <!DOCTYPE html> <

《CSS3实战》笔记--选择器(二)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011. UI元素状态伪类选择器 ??UI元素的状态一般包括:可用.不可用.选中.未选中.获取焦点.失去焦点.锁定.待机等. 表单设计原则: ??UI设计的一个核心就是让表单更可用.易用和好用.表单设计应该符合三层模型,即表单应该具有三种属性:感知(页面显示的布局).对话(内容呈现的问题和回答).关系(交互的任务结构). ???????? 实战体验一:设计可用的表单 ??设计并实现简洁.美观.可

CSS3实战开发:百度新闻热搜词特效实战开发

各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效.在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程.今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化.可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单. 可能有些人还不知道这个特效,啥也不说了,直接上效果图: 从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有

CSS3实战开发:手把手教大家搜索表单发光特效实战开发

各位网友,大家好,我是陌上花会开,今天这个案例,我将带领大家,手把手教大家开发一个会发光的表单组,还是先秀运行效果图吧: 从这个效果图,大家可以发现,当光标在某个组件上时,它就会发光,今天我将带领大家实战开发这个特效. PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果. 首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"><met

《CSS3实战》笔记--渐变设计(二)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 Gecko引擎的CSS渐变设计 直线渐变基本语法 -moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*) 参数说明: <point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right

《CSS3实战》笔记--多列布局

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 ??多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布局.灵活使用多列布局特性,可以实现在多列中显示文字和图片,从而节省大量的网页空间.如果网页上的文字很长,多列布局特性就能够发挥它的用武之地. 兼容性参考:http://www.w3.org/TR/css3-multicol/ columns属性–定义多列布局 ??columns是多列布局特性的基本属性,类似边

《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 语法: text-overflow:clip | ellipsis | ellipsis-word 取值简单说明: clip属性值表示不显示标记,而是简单的裁切. ellipsis属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). ?实际上,te