css3 常用的属性

1、伪类选择符 Pseudo-Classes Selectors

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

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、新的边框属性