前缀###

• chrome: -webkit-
• safari: -webkit-
• firefox: -moz-
• ie: -ms-
• opera: -o-

书写的时候应该先用有前缀的样式，再用无前缀的样式

颜色###

• rgb(red, green, blue);
• rgba(red, green, blue, opacity[0-1]);
• hsl(色度， 饱和度， 亮度)；

色度为色轮的度数，0/360d代表红色，120代表绿色，240代表蓝色；

饱和度百分比值，100%表示完全显示该颜色；

亮度百分比值，0%代表黑色，100%代表白色，50%平均值

• hsla()

浏览器全部支持

圆角###

border-radius: 20px;

//水平，垂直

border-radius: 20px，20px;

//左上，右上，右下，左下

border-radius: 20px，20px 20px 20px;

safari:使用-webkit-;ie>=9

下拉阴影###

//水平；垂直；模糊直径；颜色

box-shadow: 10px 5px 15px #000;

//内阴影

box-shadow: 10px 5px 15px #000 inset;

//水平；垂直；模糊直径；延展距离;颜色

box-shadow: 10px 5px 15px 15px #000;

//多阴影

box-shadow: 0 1px 1px #fff inset, 5px 5px 10px #000;

chromw:-webkit-;safari:-webkit-;ie>=9

文本阴影###

//水平;垂直;颜色

text-shandow: 1px 1px #fff;

//水平;垂直;模糊直径;颜色

text-shandow: 1px 1px .3em #fff;

ie不支持

渐变###

默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向

linear-gradient(#ccc, #ddd, white);

//设定一个倾斜度

linear-gradient(-45deg, #ccc, #fff);

//水平渐变

linear-gradient(left, #ccc, #fff);

//设置颜色停止值

linear-gradient(white, #ddd 20%, black);

safari书写有些区别

firefox: -moz-; chrome:-webkit-; safari:其他实现方法; ie>=10,-ms-; opear>=11.1, -o-;

多重背景###

ie>=9

选择器###

//选中的第一个元素

:first-child

//选中的最后一个元素

:last-child

//选中的元素是其父元素的唯一子元素

:only-child

//选中当前URL的哈希中的目标元素

:target

//选中复选框以被勾选的元素

:checked

• nth-child选择器

nth-child(n);

nth-child(even);/nth-child(2n);

nth-child(odd);/nth-child(2n+1);

• 直接后代选择器

>

• 否定选择器

:not(.current)

ie>=9

过渡###

transition: 持续时间， 属性， [动画类型];

//多个动画

transition: 2s opacity, .5s height ease-in;

定时函数种类

• linear
• ease-in
• ease-out
• ease-in-out

例子

div {

      background: pink;

      width: 50px;

      height: 50px;

      -moz-transition: 2s width ease-in, 2s height ease-out; /* Firefox 4 */

      -webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */

      -o-transition: 2s width ease-in, 2s height ease-out; /* Opera */

      transition: 2s width ease-in, 2s height ease-out;

}

div:hover{

      width: 100px;

      height: 150px;

}

  div {

      position: absolute;

      left: 10px;

      -moz-transition: 2s left

      -webkit-transition: 2s left;

      -o-transition: 2s left ;

      transition:2s left;

    }

   div:hover{

     position: absolute;

     left: 	100px;

    }

firefox:-moz-; chrome:-webkit-; safari: -webkit-; ie>=10; opear: -o-;