美文网首页
用户界面与其它重要属性

用户界面与其它重要属性

作者: love2013 | 来源:发表于2016-08-02 15:39 被阅读13次

    自由缩放属性resize

    为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止,可以使用overflow属性的任何容器元素。

    在此之前,Web设计师为了要实现这样具有拖动效果的UI,使用大量的脚本代码才能实现,这样费时费力,效率极低。

    resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。但使用方法却是极其的简单,先从其语法入手。

    resize: none | both | horizontal | vertical | inherit

    取值说明:

    属性值

    取值说明

    none

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

    both

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

    horizontal

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

    vertical

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

    inherit

    继承父元素的resize属性值。

    例如:通过resize属性,让文本域可以沿水平方向拖大。代码为:

    textarea {

    -webkit-resize: horizontal;

    -moz-resize: horizontal;}

    CSS3外轮廓属性

    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。

    outline属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持,在CSS3中对outline作了一定的扩展,在以前的基础上增加新特性。outline属性的基本语法如下:

    outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit

    从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style,而outline-width相当于border-width,只不过CSS3给outline属性增加了一个outline-offset属性,其取值说明如下。

    -o-resize: horizontal;

    -ms-resize: horizontal;

    resize: horizontal;

    }

    相关文章

      网友评论

          本文标题:用户界面与其它重要属性

          本文链接:https://www.haomeiwen.com/subject/nocfsttx.html