css3 属性总结

1、grandient总结

.gradient-box{background-image:-webkit-linear-gradient(top,#ccc,#000);
background-image:-moz-linear-gradient( top,#ccc,#000);
background-image:linear-gradient(to bottom,#ccc,#000);
background-image: -o-linear-gradient(top,#ccc, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fff, endColorstr=#000);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#cccccc, endColorstr=#000000)";/*IE8+*/}

还可以设置好几种颜色如：background-image: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), color-stop(0.5, #ace), color-stop(0.75, #f96), to(#ace));

 

2、css em px用法总结

px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

因此用px来定义字体，就无法用浏览器字体放大的功能。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

3、css box-shadow(具有3D效果)

.drop-shadow {
width: 300px;
height: 150px;
position: relative;
background: #ccc;
margin-left: 100px;
}
.drop-shadow:before,
.drop-shadow:after {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
left: 10px;
width: 50%;
max-width: 150px;
height: 20%;

-webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
-moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
box-shadow: 0 15px 10px rgba(125,125,125,0.8);
/*add css3 transform*/
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.drop-shadow:after {
right:10px;
left: auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}

效果：