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