关于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/