css3之其他的属性

标签：

1,自由缩放属性resize

这个属性真的很好玩呢，允许用户可以通过拖动的方式来修改元素的尺寸来改变元素的大小。

记住，得加浏览器的前缀

适用对象：可以使用overflow属性的任何元素

取值：

none:不可以拖动

both:可以修改元素的宽度和高度

horizontal:只能修改宽度

vertical：只能修改高度

inherit：继承父元素的属性值

2,外轮廓属性outline

效果：与border相似，但与border不同的是，外轮廓线不占用网页布局空间，外轮廓是一种

动态的样式，只有元素获取到焦点或者被激活是呈献；

取值：

outline-color:默认黑色

outline-style:默认none

outline-width:默认medium

outline-offset:轮廓边框的偏移位置数值，可以取负，参数为正时，表示轮廓边框向外偏移几个像素

，为负，则是向内偏移。

inhert：继承父元素

<textarea cols="30" rows="10"></textarea>
<style>
textarea{
    -webkit-resize: vertical;
    -moz-resize: vertical;
    -o-resize: vertical;
    -ms-resize: vertical;
    resize: vertical;
}
</style>

3，生成内容content

css3中可以通过伪类“:before”,"after"，和css3的伪元素“::before”，和"::after"来实现，关键就是

依靠css3中的“content”属性来实现的。（对img和input不起作用）

content配合css的伪类或者伪元素，一半可以做以下的事情：

（1）none:不生成任何内容

（2）attr:插入标签的属性值

（3）url:使用指定的绝对或相对地址插入一个外部资源（图像，声频等）

（4）string:插入字符串

<h1 id="testContent"name="myName">在我的后面插入我的名字</h1>
<style>
#testContent::after {
  content:attr(name);
  color: red;
}
<style>

效果如下

css3之其他的属性

标签：

原文地址：http://www.cnblogs.com/fnncat/p/4868827.html