我的css3学习笔记(慢慢更新中)

为了更好的兼容各个浏览器，在写css样式时需要加上前缀（表示该属性未成为W3C标准）
/*前缀        浏览器*/

-webkit    chrome(谷歌)和Safari(苹果)

-moz       firefox(火狐)

-ms        IE

-o         opera(欧朋)

一、边框
  1.圆角效果：border-radius:10px/*所有角都是半径为10px的圆角*/
             border-radius:5px 4px 3px 2px /*顺时针*/
  2.多种颜色的边框：border-width:6px; border-top-colors:#000 #111 #222 #333 #444 #555;/*border的宽度是5px，即可以写五种颜色，（若写3中则剩下的像素为最后一种颜色）*/
  3.阴影：box-shadow:4px/*(必写，)x轴偏移量 */2px/*(必写)Y轴偏移量*/6px/*（可选）阴影模糊半径*/1px/*(可选)阴影扩展半径*/#ccc/*（可选）阴影颜色*/ insert/*(可选)投影方式：内投insert外投outset*/

二、颜色
 1.颜色为透明色：rgba(R,G,B,A)/*R(red:0~255);G(green:0~255);B(blue:0~255);A(alpha透明度：0~1) */
    color:rgba(100,230,200,0.5);
 2.渐变颜色：linear-gradient(to bottom,#fff,#999)/*指定渐变方向（默认180deg=to bottom 可选值top left左上到右下，top right右上到左下，to bottom right右下到左上）；颜色的起点；颜色的结束点*/

三、文本

  文本阴影：text-shadow:2px 2px 4px #eff2ef;/*pram1:阴影水平距离，正值右偏，负值左偏；pram2:阴影垂直距离，正值下偏，负值上偏；pram3：阴影模糊程度，越大越模糊【不能为负】;pram4:阴影颜色*/

 【兼容性问题】： ie9及更早不支持

四、Keyframe规则(关键帧)

@keyframe 动画名{
 0% {
    background:red;
  }
 100% {
    background:green;
  }

}

【兼容性问题】

@keyframe 动画名{
 0% {
    background:red;
  }
 100% {
    background:green;
  }

}

@-moz-keyframe 动画名{/* Firefox */
 0% {
    background:red;
  }
 100% {
    background:green;
  }

}

@-webkit-keyframe 动画名{/* Chrome、Safair */
 0% {
    background:red;
  }
 100% {
    background:green;
  }

}

(关于调用)
.div {
    width:200px;
    height:200px;
    animation: 动画名 动画执行时间 ;
        /*1.animation-name:动画名
          2.animation-duration:动画执行时间
          3.animation-timing-function:(ease-out)
          4.animation-delay:规定动画何时开始
          5.animation-direction:规定动画是否在下一周期逆向播放
          6.animation-iteratiomn-count:动画执行次数（infinite循环执行）
          7.animation-direction:动画播放方向（normal正向；alternate正向后反向）
          8.animation-play-state:动画播放状态（running播放；paused暂停）
          9.animation-fill-mode:动画开始之前和结束之后发生的操作（none）动画按预期进行与结束，完成后返回第一帧；（forwards）动画结束后，停在最后一帧；（backwards）会在向元素应用动画样式时迅速应用动画的初始帧；（both）动画同时有forwards和backwards效果

*/

    -moz-animation: 动画名 动画执行时间 ;

   -webkit-animation: 动画名 动画执行时间 ;

}