1. 圆角边框
  2. 多背景图
  3. 颜色和透明度(由原来的rgb到现在的rgba)
  4. 多列布局和弹性盒模型
  5. 盒子的变幻（2D、3D）
  6. 过渡和动画
  7. 引入web字体（在服务器端存储）
  8. 媒体查询
  9. 阴影

圆角边框

1
border-radius:5px;

多背景图

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

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

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

多列布局和弹性盒模型

1
display: flex;

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

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

1
2
3
4
transform: translate(50px,100px);//移动
transform: rotate();//旋转
transform: scale();//缩放
transform: skew();//倾斜

过渡和动画

1
transition: width 1s linear 2s;

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

1
2
3
4
5
6
7
animation: myfirst 5s;
@keyframes myfirst {
   0% {background: block;}
   25% {background: red;}
   50% {background: yellow;}
   100% {background: green;}
 }

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

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

1
2
3
4
5
6
7
@font-face {
    font-family: myfirstfont;
    src: url(sansation_light.woff);
}
div {
    font-family: myfirstfont;
}

媒体查询

1
2
3
4
5
6
 body{
    background: yellow;
}
@media screen and (max-width: 480px){
    background: red;
 }

阴影

1
2
3
4
5
6
h1 {//文字阴影
    text-shadow: 5px 5px 5px red;
}
div {//盒子阴影
    box-shadow: 10px 5px 5px yellow;
}