关于html:第-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;
      }
  }

附加

• 此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨
• 【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In…
• 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/