css3新特性总结

一、圆角边框

border-radius:5px;

二、多背景图

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

三、颜色和透明度(由原来的rgb到现在的rgba)

background: rgba(0,0,0,.5);

四、多列布局和弹性盒模型

display: flex;

五、盒子的变幻（2D、3D）

transform: translate(50px,100px);//移动

transform: rotate();//旋转

transform: scale();//缩放

transform: skew();//倾斜

用于元素的直接或者鼠标感应变化，没有其他变幻参数（如延时，持续时间，变幻曲线），立即改变。

六、过渡和动画

transition: width 1s linear 2s;

过渡效果，transition通过指定某些属性和变幻参数，以原始定义为开始状态，通过鼠标操作变化(hover)，hover状态定义结束状态，实现过渡效果。

animation: myfirst 5s;

@keyframes myfirst {

    0% {background: block;}

    25% {background: red;}

    50% {background: yellow;}

    100% {background: green;}

}

动画效果，加强版的过渡效果，通过animation指定动画名和动画参数，@keyframes定义动画内容，根据参数自动触发。

七、引入web字体（在服务器端存储）

@font-face {

    font-family: myfirstfont;

    src: url(sansation_light.woff);

}

div {

    font-family: myfirstfont;

}

八、媒体查询

body{

    background: yellow;

}

@media screen and (max-width: 480px){

    background: red;

}

九、阴影

 

 

h1 {//文字阴影

    text-shadow: 5px 5px 5px red;

}

div {//盒子阴影

    box-shadow: 10px 5px 5px yellow;

}