共计 729 个字符，预计需要花费 2 分钟才能阅读完成。
一、圆角边框
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;
animation: myfirst 5s;
@keyframes myfirst {
0% {background: block;}
25% {background: red;}
50% {background: yellow;}
100% {background: green;}
}
七、引入 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;
}
