首页 > WEB开发 > CSS

css resize调节元素尺寸大小 右下角可拖动【CSS3.0参考手册】

使用resize可以在元素上拖动 来自己改变元素大小,调节尺寸,和chrome文本框默认的样式相同,在右下角出现拖动的小图标

语法:

resizenone | both | horizontal | vertical | inherit

相关属性: N/A

取值:

none:
UserAgent没提供尺寸调整机制,用户不能操纵机制调节元素的尺寸。
both:
UserAgent提供双向尺寸调整机制,让用户可以调节元素的宽度和高度。
horizontal:
UserAgent提供单向水平尺寸调整机制,让用户可以调节元素的宽度。
vertical:
UserAgent提供单向垂直尺寸调整机制,让用户可以调节元素的高度。
inherit:
默认继承。

说明:

使元素的区域可缩放,调节元素尺寸大小。适用于任意获得"overflow"条件的容器。

兼容性:

类型 Internet Explorer Firefox Chrome Opera Safari
版本 (×)IE6 (×)Firefox 2.0 (√)Chrome 1.0.x (×)Opera 9.63 (√)Safari 3.1
(×)IE7 (×)Firefox 3.0 (√)Chrome 2.0.x   (√)Safari 4
(×)IE8        
         

示例:

css  resize调节元素尺寸大小 右下角可拖动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css  resize调节元素尺寸大小 右下角可拖动</title>

</head>

<body>
    
<div style="width:300px;height:80px;padding:16px;border:1px solid;resize:both;overflow: auto;">Safari、Chrome允许元素的缩放的,但尚未完全支持,目前只允许双向调整。CSS3允许你将这个属性应用到任意元素,这将使缩放这个功能拥有跨浏览器的支持。</div>

</body>
</html>
来源://作者:/更新时间:2014-01-20
相关文章
评论:
验证码:
匿名评论: