关于CSS3的新特性（面试经典）

1.过渡属性 

transition： 要改变的属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

 2.动画属性

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

 3.圆角属性：

CSS border-radius - 指定每个角

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：

三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：

两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：

一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

 4.引入了rgba

 

 5.背景色渐变

 

#grad {
  background-image: linear-gradient(red, yellow);
}

这是从上到下从红色渐变为黄色

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

这是从左到右由红色渐变成黄色

 6.盒子阴影

 

div
{
box-shadow: 10px 10px 5px #888888;
}

7.盒子新特性

 

box-sizing:border-box;

这是干嘛的捏，它可以将边框和内边距都算进盒子大小里，妈妈再也不用担心你不会算布局啦

8.justify-content 

 在容器中央对齐弹性项目

div {
  display: flex;
  justify-content: center;
}

 9.overflow：scroll

 让溢出的文字具有滚动条

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

 10.transform（旋转）

 

div
{
transform:rotate(7deg);
}

11.准许文字换行

p.test {word-wrap:break-word;}

12.弹性布局，栅格布局