css3 常用的属性

1、伪类选择符 Pseudo-Classes Selectors

Selectors 选择符	CSS Version 版本	Description 简介
E:link	CSS1	设置超链接a在未被访问前的样式。
E:visited	CSS1	设置超链接a在其链接地址已被访问过时的样式。
E:hover	CSS1/2	设置元素在其鼠标悬停时的样式。
E:active	CSS1/2	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus	CSS1/2	设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:lang(fr)	CSS2	匹配使用特殊语言的E元素。
E:not(s)	CSS3	匹配不含有s选择符的元素E。
E:root	CSS3	匹配E元素在文档的根元素。
E:first-child	CSS2	匹配父元素的第一个子元素E。
E:last-child	CSS3	匹配父元素的最后一个子元素E。
E:only-child	CSS3	匹配父元素仅有的一个子元素E。
E:nth-child(n)	CSS3	匹配父元素的第n个子元素E。
E:nth-last-child(n)	CSS3	匹配父元素的倒数第n个子元素E。
E:first-of-type	CSS3	匹配同类型中的第一个同级兄弟元素E。
E:last-of-type	CSS3	匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type	CSS3	匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n)	CSS3	匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n)	CSS3	匹配同类型中的倒数第n个同级兄弟元素E。
E:empty	CSS3	匹配没有任何子元素（包括text节点）的元素E。
E:checked	CSS3	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled	CSS3	匹配用户界面上处于可用状态的元素E。
E:disabled	CSS3	匹配用户界面上处于禁用状态的元素E。
E:target	CSS3	匹配相关URL指向的E元素。
@page:first	CSS2	设置页面容器第一页使用的样式。仅用于@page规则
@page:left	CSS2	设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right	CSS2	设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

2、resize

语法：

resize：none | both | horizontal | vertical

默认值：none

适用于：所有设置了overflow除了visible之外的元素

继承性：无

取值：

none：

不允许用户调整元素大小。

both：

用户可以调节元素的宽度和高度。

horizontal：

用户可以调节元素的宽度

vertical：

用户可以调节元素的高度。

说明：

设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。

• 如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
• 对应的脚本特性为resize。

案例：

<style>
.test{overflow:auto;width:200px;height:100px;resize:both;background:#eee;}
</style>

<div class="test">
    <ul>
        <li>新闻列表</li>
        <li>新闻列表</li>
        <li>新闻列表</li>
    </ul>
</div>

3、outline-offset

语法：

outline-offset：<length>

默认值：0

适用于：所有元素

继承性：无

取值：

<length>：

用长度值来定义轮廓偏移。允许负值。0是以border边界作为参考点的，正值从border边界往外延，负值从border边界往里缩。

说明：

设置或检索对象外的线条轮廓偏移容器的值。参阅outline属性。

• 对应的脚本特性为outlineOffset。

案例：

<style>
.test{width:220px;padding:10px;outline:1px dashed #333;outline-offset:4px;border:3px solid #333;}
</style>
<div class="test">注意虚线轮廓偏移容器的距离<br />outline-offset:4px;</div>

4、transform（变换）

语法：

transform：none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)?

默认值：none

适用于：所有块级元素及某些内联元素

继承性：无

取值：

none：

无转换

matrix(<number>,<number>,<number>,<number>,<number>,<number>)：

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate(<length>[, <length>])：

指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX(<length>)：

指定对象X轴（水平方向）的平移

translateY(<length>)：

指定对象Y轴（垂直方向）的平移

rotate(<angle>)：

指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义

scale(<number>[, <number>])：

指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scaleX(<number>)：

指定对象X轴的（水平方向）缩放

scaleY(<number>)：

指定对象Y轴的（垂直方向）缩放

skew(<angle> [, <angle>])：

指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewX(<angle>)：

指定对象X轴的（水平方向）扭曲

skewY(<angle>)：

指定对象Y轴的（垂直方向）扭曲

说明：

设置或检索对象的转换。

• 对应的脚本特性为transform。

* transform-origin

语法：

transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

默认值：50% 50%，效果等同于center center

适用于：所有块级元素及某些内联元素

继承性：无

取值：

<percentage>：

用百分比指定坐标值。可以为负值。

<length>：

用长度值指定坐标值。可以为负值。

left：

指定原点的横坐标为left

center①：

指定原点的横坐标为center

right：

指定原点的横坐标为right

top：

指定原点的纵坐标为top

center②：

指定原点的纵坐标为center

bottom：

指定原点的纵坐标为bottom

说明：

设置或检索对象以某个原点进行转换。

• 该属性提供2个参数值。
• 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
• 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
• 对应的脚本特性为transformOrigin。

5、transition

语法：

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

默认值：看每个独立属性

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

[ transition-property ]：

检索或设置对象中的参与过渡的属性

[ transition-duration ]：

检索或设置对象过渡的持续时间

[ transition-timing-function ]：

检索或设置对象中过渡的动画类型

[ transition-delay ]：

检索或设置对象延迟过渡的时间

说明：

复合属性。检索或设置对象变换时的过渡。

• 可以为同一元素的多个属性定义过渡效果。示例：

  缩写方式：

  transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

  拆分方式：

  transition-property:border-color, background-color, color;
  transition-duration:.5s, .5s, .5s;
  transition-timing-function:ease-in, ease-in, ease-in;
  transition-delay:.1s, .1s, .1s;

• 如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写：

  拆分方式：

  transition-property:border-color, background-color, color;
  transition-duration:.5s;
  transition-timing-function:ease-in;
  transition-delay:.1s;

• 如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：

  缩写方式：

  transition:all .5s ease-in .1s;

  拆分方式：

  transition-property:all;
  transition-duration:.5s;
  transition-timing-function:ease-in;
  transition-delay:.1s;

• 对应的脚本特性为transition。

6、动画 Animation

Properties 属性	CSS Version 版本	Inherit From Parent 继承性	Description 简介
animation	CSS3	无	复合属性。检索或设置对象所应用的动画特效
animation-name	CSS3	无	检索或设置对象所应用的动画名称
animation-duration	CSS3	无	检索或设置对象动画的持续时间
animation-timing-function	CSS3	无	检索或设置对象动画的过渡类型
animation-delay	CSS3	无	检索或设置对象动画延迟的时间
animation-iteration-count	CSS3	无	检索或设置对象动画的循环次数
animation-direction	CSS3	无	检索或设置对象动画在循环中是否反向运动
animation-play-state	CSS3	无	检索或设置对象动画的状态
animation-fill-mode	CSS3	无	检索或设置对象动画时间之外的状态

7、user-select

语法：

user-select：none | text | all | element

默认值：text

适用于：除替换元素外的所有元素

继承性：无

取值：

none：

文本不能被选择

text：

可以选择文本

all：

当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element：

可以选择文本，但选择范围受元素边界的约束

说明：

设置或检索是否允许用户选中文本。

• IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
• 直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；
• 除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；
• 对应的脚本特性为userSelect。

案例：<style>
.testSelect1{padding:10px;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;background:#eee;}
.testSelect2{padding:10px;-webkit-user-select:none;-moz-user-select:text;-o-user-select:none;user-select:none;background:#eee;}
.testSelect3{padding:10px;-webkit-user-select:none;-moz-user-select:all;-o-user-select:none;user-select:none;background:#eee;}
</style>

　　　<div class="testSelect1">选择我试试，你会发现怎么也选择不到我，哇哈哈</div>
        <div class="testSelect2" onselectstart="return false;" unselectable="on">我是正常的</div>
        <div class="testSelect3" onselectstart="return false;" unselectable="on">选择我试试，你会发现我们是一个整体，哇哈哈</di

8、新的边框属性

属性	描述	CSS
border-image	设置所有 border-image-* 属性的简写属性。	3
border-radius	设置所有四个 border-*-radius 属性的简写属性。	3
box-shadow	向方框添加一个或多个阴影。	3