css3

记录下部分常用的css3

1.transform (变形、转换)

   -moz-transform/-webkit-transform/-o-transform/-ms-transform;

   (支持chrome,safari,opera,firefox,IE9)

a.rotate 

    transform:rotate(90deg); //顺时针旋转90度   支付宝页面看到有用到，IE用的writing-mode:tb-rl 模拟的;

IE 用css滤镜实现翻转效果 filter:FlipH;(水平翻转)；filter:FlipV(垂直翻转)

 

b.transform-origin 

   transform-origin:90px 0; //把转动的原点移动到（90px,0）;它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数

 

c.matrix

   transform:matrix(0,1px,1px,2px,2px,5px);  //含6个值的以变换矩阵的形式指定一个2D变换

d.translate

   transform:translate(10px,10px);//水平垂直各移动10px,  translateY(10px)/translateX(10px);

e.scale

   transform:scale(2,2);//缩放倍数只有一个参数时默认第二个参数和第一个一样。 scaleX(1)/scaleY(1)

f: skew

   transform:skew(20deg);扭曲 第二个参数未提供默认为0，skewX(10deg)/skewY(10deg);

   若同时有多个可以类似这样写：transform:rotate(90deg) scale(1.5) skew(10deg);

 

2.transition （过渡）

   transition:[transition-property] [transition-duration] [transition-timing-function] [transition-delay]

   [transition-property]:过渡的属性，比如color/font-size等 也可以设置为all

   [transition-duration]:过渡的时间，单位为（s）eg:5s;

   [transition-timing-function]:过渡的动画类型，可以是：linear | ease | ease-in | ease-out | ease-in-out |                 cubic-    bezier（n1,n2,n3,n4）4个数值需在[0, 1]区间内

   [transition-delay]:过渡延迟的时间 默认为0；

 

   eg: .a{color:red; transition:color 5s ease-in .1s;}

         .a:hover{color:green;}

 

3.border-radius

   border-radius:1px 2px 3px 4px;

 

4.box-shadow

   box-shadow:1px 2px 3px 3px green inset;

   值分别代表 水平偏移 垂直偏移 阴影模糊值 阴影外延值 阴影颜色 内阴影（可选）

 

5.text-shadow

   text-shadow:1px 2px 3px green;

 

6.border-image

  border-image:url(border.jpg) 27/20px stretch;  默认为拉伸（stretch）;可以选repeat,round(平铺)

 

7.nth-child

   tr:nth-child(even)   tr:nth-child(odd):hover  //选择奇数或偶数行

   tr:nth-child(n+2)    //选择第二个及以上的tr

   tr:first-child   //选择第一个tr   IE7+支持

 

   浏览器支持：IE9+  想要IE6+也支持可以参考下这里http://selectivizr.com/

 

待更新...

 

可以用http://caniuse.com 查看浏览器支持程度