CSS3的新特性1. 边框 border-radius box-shadow：10px 10px 5px #888888

1. 边框

border-radius
box-shadow：10px 10px 5px #888888;
border-image：url(border.png) 30 30 round;

2. 背景（有两个属性可以配套使用：background-position、background-repeat）

background-image
background-size
background-origin:content-box, padding-box,和 border-box 意思是图片相对于什么对齐，定位图片用的
background-clip： padding-box和content-box； 背景的绘制区域

3. 渐变（详见www.runoob.com/css3/css3-g…

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

4. 文本

text-shadow
box-shadow
text-overflow
word-wrap：break-word; 允许文本换行
word-break：keep-all或break-all 允不允许单词拆分换行

5. 字体

@font-face

6. 2D转换

translate() 平移
rotate() 旋转
scale()
skew()
matrix()

7. 3D

rotateX()
rotateY()

8. 过渡

transition：width 2s 要配合hover来定义一下width是多少，在2秒内实现过渡到指定宽度。
transition-timing-function: linear; 表示匀速过渡效果

9. 动画

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
//  配合animation: myfirst 5s;使用

10. 多列

column-count等

11. 用户界面

resize
box-sizing
outline-offset 外形修饰（可以在边框外再套一个框）

12.图片布局

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

<img src="paris.jpg" alt="Paris">
// 还可以配合hover做酷炫点的效果

13. 按钮、分页

朋友们用组件库更香

14. 弹性盒子

-display:flex; 弹性布局网上找专门介绍的帖子就行

15. 多媒体查询

@media