[分享]css3层叠样式对比

CSS3层叠样式比较

/*padding*/
padding-top：0       /*上*/     padding-left：0     /*左*/
padding-right：0     /*右*/     padding-bottom：0  /*下*/
/*margin*/
margin-top：0        /*上*/     margin-left：0      /*左*/
margin-right：0      /*右*/     margin-bottom：0   /*下*/
/*border*/
border-top-width:0;       /*上*/    border-left-width:0     /*左*/
border-right-width:0;     /*右*/    border-bottom-width:0  /*下*/

/*Box-Shadow*/
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 0px 0px 0px 0px #000000; /*不可见，无阴影*/

/*text-shadow*/
text-shadow: h-shadow v-shadow blur color;
text-shadow: 0px 0px 0px #000000; /*不可见，无阴影*/

/*border-radius*/
border-radius:50%; //50%为半圆，100%为圆形
border-radius: 50px 20px 20px 50px; //椭圆形

/*transition*/
.transition{-webkit-transition: 属性名 时间 函数名称; 
            -moz-transition: 属性名 时间 函数名称;
            -ms-transition: 属性名 时间 函数名称;}
/*如：*/
transition：background 1s linear;

/*transform*/
transform：rotate(45deg)  skew(20deg,10deg)    scale(0.5,1)

/*animation*/
animation: name duration timing function delay iteration-count direction fill-mode play-state;
/*如：*/
animation: move 3s linear infinite;

/*linear-gradient*/
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
/*反转*/
background: linear-gradient(-135deg, #f5f7fa 0%, #c3cfe2 100%);