CSS3---用户界面

1.resize是一个重要的属性,resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。到目前为止,可以使用overflow属性的任何容器元素。

  resize: none | both | horizontal | vertical | inherit

属性值

取值说明

none

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

both

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

horizontal

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

vertical

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

inherit

继承父元素的resize属性值。

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

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

outline属性的基本语法如下:

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

属性值

属性值说明

outline-color

定义轮廓线的颜色,属性值为CSS中定义的颜色值。在实际应用中,可以将此参数省略,省略时此参数的默认值为黑色。

outline-style

定义轮廓线的样式,属性为CSS中定义线的样式。在实际应用中,可以将此参数省略,省略时此参数的默认值为none,省略后不对该轮廓线进行任何绘制。

outline-width

定义轮廓线的宽度,属性值可以为一个宽度值。在实际应用中,可以将此参数省略,省略时此参数的默认值为medium,表示绘制中等宽度的轮廓线。

outline-offset

定义轮廓边框的偏移位置的数值,此值可以取负数值。当此参数的值为正数值,表示轮廓边框向外偏离多少个像素;当此参数的值为负数值,表示轮廓边框向内偏移多少个像素。

inherit

元素继承父元素的outline效果。

 

posted @ 2016-04-20 21:09  Heroine.z  阅读(251)  评论(0编辑  收藏  举报