第 11 题：CSS 和 CSS3 有什么区别？

概念

• 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;
      }
  }

文章的内容/灵感都从下方内容中借鉴

• 【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...
• 【大数据可视化图表插件】https://www.npmjs.com/package...
• 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/