概念

• CSS3 是在 CSS 的基础上新增了一些特性

CSS3 新特性

• CSS3 圆角

  div
  {
      border-radius:25px;
  }
  

• CSS3 盒阴影

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

• CSS3 边框图片

  div
  {
      border-image:url(border.png) 30 30 round;
  }
  

• CSS3 背景

  div
  {
      background: url(img_flwr.gif);
  }
  

• CSS3 渐变

  div
  {
      background-image: linear-gradient(#e66465, #9198e5);
      background-image: radial-gradient(red 5%, yellow 15%, green 60%);
  }
  

• CSS3 文本效果

  div
  {
      text-shadow: 5px 5px 5px #FF0000;
      text-overflow: clip;
  }
  

• CSS3 字体

  @font-face
  {
      font-family: myFirstFont;
      src: url(sansation_light.woff);
  }
  

• CSS2D 转换

  div
  {
      transform: translate(x,y);
  }
  

• CSS3D 转换

  div
  {
      transform-style: preserve-3d;
      transform: translate3d(x,y,z);
  }
  

• CSS3 过渡

  div
  {
      transition:width 2s;
  }
  

• CSS3 动画

  @keyframes myfirst
  {
      0% {  background: red; }
      100% {  background: yellow;}
  }
  
  div
  {
      animation: myfirst 5s linear 2s infinite alternate;
  }
  

• CSS3 多列

  div
  {
      columns:100px 3;
  }
  

• CSS3 盒子模型

  div
  {
      box-sizing:border-box;
  }
  

• CSS3 弹性盒子

  div
  {
      display: flex;
  }
  

• CSS3 多媒体查询

  @media screen and (min-width: 480px) {
      body {
          background-color: lightgreen;
      }
  }