自己模糊不定的css样式

1.居中

text-align:center 是相对于子元素的居中，只对行内元素起作用
margin:0 auto 是相对于自己的居中，对块元素起作用

2.position定位

position：relative 相对定位 （生成相对定位的元素，相对于其正常位置进行定位）

相对定位会按照元素的原始位置对该元素进行移动

position: absolute 绝对定位 （生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位）

如果外层div是absolue,子级设置absolut会相对于父级定位

position: static （默认值。没有定位，元素出现在正常的流中）

position: inherit （规定应该从父元素继承 position 属性的值）

z-index : 0 (显示层级) 

3.阴影

box-show:h-shadow v-shadow blur spread color inset
//水平阴影的位置，垂直阴影的位置 ，模糊距离，阴影尺寸，阴影颜色，将外部阴影改为内部阴影
text-show:h-shadow v-shadow blur color
//水平阴影的位置，垂直阴影的位置，模糊距离，阴影颜色

4.背景

background:background-color background-image background-repeat backgrond-attachment background-position
//元素的颜色，背景图像，背景图像是否重复如何重复，背景图像固定或随页面其余部分滚动，背景图像的起始位置
background-repeat:repeat / repeat-x / repeat-y / no-repeat
background-attachment:scroll / fixed
background-position:top left / x% y%
配合background-size 使用

5.自定义字体

@font-face{
    font-family:myFontFamily;
    src:url("字体包.ttf"),url("字体包.eot");
    font-weight:normal
    font-style:normal
}
div{
    font-family:myFontFamily
}

6.动画

浏览器内核

-ms-             //IE9
-moz-          //Firefox
-webkit-      //Safari、Chrome
-o-              //Opera

【1】transform

transform:translate(10px,20px)//偏移，距离left（x轴）,top（y轴）的值transform:rotate(10deg)//旋转，顺时针旋转10度，如果为负值，表示逆时针旋转度数
transform:scale(2,2)//原始宽高的放大倍数
transform:skew(20deg,20deg)//翻转，根据x轴，y轴翻转角度
transform:matrix(1,1,1,1,1,1)//所有2D动画的组合，共六个参数：旋转、缩放、移动以及倾斜元素

【2】transition

div{
    width:100px;    
    height:100px;
    transition:width 2s,height 2s,transform 2s;
}
div:hover{
    height:200px;
    width:200px;
    tranform:rotate(180deg)
}

【3】@keyframes

[1]

@keyframes myKeyframes{
    from{background:white}
    to{background:black}
}

[2]

@keyframes myKeyframes{
    0%{background:white;left:0px;top:0px}
    25%{background:lightgray;left:200px;top:0px}
    50%{backgrpund:gray;left:0px;top:200px}
    100%{background:black;left:0px;top:0px}
}
div{
    width:100px;
    height:100px;
    position:relative;
    animation:myKeyframes 2s;
}