css3 常用的属性

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：[ <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。

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。

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