css3 用户界面以及其它重要属性

自由缩放 resize 属性

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

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

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

resize: none | both | horizontal | vertical | inherit

取值说明：

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

textarea {
  -webkit-resize: horizontal;
  -moz-resize: horizontal;
  -o-resize: horizontal;
  -ms-resize: horizontal;
  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 属性，其取值说明如下。

CSS 生成内容

在 Web 中插入内容，在 CSS2.1 时代依靠的是 JavaScript 来实现。但进入 CSS3 进代之后我们可以通过 CSS3 的伪类“:before”，“:after”和 CSS3 的伪元素“::before”、“::after”来实现，其关键是依靠 CSS3 中的“content”属性来实现。不过这个属性对于img和input元素不起作用。

content 配合 CSS 的伪类或者伪元素，一般可以做以下四件事情：

实例展示：

在 CSS 中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：

.clearfix:before,
.clearfix:after {
       content:””;
       display:table;
}

.clearfix:after {
       clear:both;
       overflow:hidden;
}

上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。

假设我们有一个元素：

<a href=”##” title=”我是一个 title 属性值，我插在你的后面”>我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {
  content:attr(title);
       color:#f00;
}

效果展示：

以上关于css3 用户界面以及其它重要属性的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。