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