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

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

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