css3个人学习笔记一

1.transition:

a.foo{padding:5px 10px;background:#578;color:#aa9;-moz-transition:all 0.3s ease;}
a.foo:hover,a.foo:focus{background:#999;color:#ee6;}

其中transition:background 0.3s ease 1s参数分别表示属性,渐变时间,样式,延迟时间.
可以transition的属性可以为:width,opacity,position,font-size.
样式有六个属性:ease,ease-in,ease-out,ease-in-out,liner,cubic-bezier.

Transition me

2.text-shadow and rbga:
  

{rgba(0,0,120,0.7);}
{text-shadow:1px 1px 1px #787;}

3.border-raduis:

{border-raduis:5px;}

4.opcaity:

a img{opacity:0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";/*IE-8 hack*/
filter:alpha(opacity=30); /*IE-7 hack*/}
a:hover img{opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/*IE-8 hack*/
filter:alpha(opacity=80); /*IE-7 hack*/
}

  这样可以通过transition:opacity 0.3 ease-in-out.渐变不透明度

5.transform

这个属性变化多端,就先不叙述了,可以完成好多要JS才能完成的任务,先简单的学到这里吧!