【前端面经】CSS-CSS3新增特性

CSS3新增特性

1. 新增了属性选择器
   

2. 新增了边框属性

   • border-radius 圆角
   • border-shadow 阴影
   • border-image 使用图片绘制边框

3. 新增颜色表示方式和渐变

   • 颜色表示方式新增rgba和hsla
   • 新增线性渐变和径向渐变
     • linear-gradient
     • radial-gradient

4. 新增transform转换

   • 旋转rotate, 缩放scale, 倾斜skew, 平移translate元素

5. 新增transition过渡

   • 过渡效果
   • 持续时间

6. 新增animation动画
   动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬

• animation也有很多的属性
• animation-name：动画名称
• animation-duration：动画持续时间
• animation-timing-function：动画时间函数
• animation-delay：动画延迟时间
• animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
• animation-direction：动画执行方向
• animation-paly-state：动画播放状态
• animation-fill-mode：动画填充模式

7. 其他
   • flex布局, grid布局
   • 媒体查询
   • …

参考文章

面试官