第 11 题（CSS 和 CSS3 有什么区别（）） html

概念

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; }
【第 11 题（CSS 和 CSS3 有什么区别（））】CSS3 多媒体查询

@media screen and (min-width: 480px) { body { background-color: lightgreen; } }