手记

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

0人推荐
随时随地看视频
慕课网APP