css3 有哪些新特性

选择器 E:last-child 匹配父元素的最后一个子元素 E。
E:nth-child(n)匹配父元素的第 n 个子元素 E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。
RGBA
回答此问题，面试官很可能继续问：rgba()和 opacity 的透明效果有什么不同？

多栏布局

@font-face { font-family: BorderWeb; src: url(BORDERW0.eot); } @font-face { font-family: Runic; src: url(RUNICMT0.eot); } .border { font-size: 35px; color: black; font-family: "BorderWeb"; } .event { font-size: 110px; color: black; font-family: "Runic"; }

/* 淘宝网字体使用 */

@font-face { font-family: iconfont; src: url(//at.alicdn.com/t/font_1465189805_4518812.eot); } 圆角 border-radius: 15px; 边框图片 CSS3 border-image 属性

盒阴影 /* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */ 盒子大小 CSS3 box-sizing 属性

媒体查询 CSS3 @media 查询

CSS3 动画 @keyframes

@keyframes abc { from { transform: rotate(0); } 50% { transform: rotate(90deg); } to { transform: rotate(360deg); } } animation 属性

/* animation ： name duration timing-function delay interation-count direction play-state / 渐变效果 background-image: -webkit-gradient( linear, 0% 0%, 100% 0%, from(#2a8bbe), to(#fe280e) ); CSS3 弹性盒子模型 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 过渡 div { transition: width 2s; -moz-transition: width 2s; / Firefox 4 / -webkit-transition: width 2s; / Safari 和 Chrome / -o-transition: width 2s; / Opera */ } CSS3 变换 rotate()旋转 translate()平移 scale( )缩放 skew()扭曲/倾斜 变换基点 3d 转换