CSS基础常识问答（四）

CSS3 新特性有哪些？

1.颜色：新增 RGBA，HSLA 模式
2. 文字阴影（text-shadow、）
3.边框： 圆角（border-radius）边框阴影： box-shadow
4.盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画 animate @keyfrom
9. 在 CSS3 中唯一引入的伪元素是 ：：selection.
10. 媒体查询，多栏布局 @media screen and (width:800px){ … } >11. border-image
12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D 转换
14 字体图标 font-face
15 弹性布局 flex

rgba()和 opacity 的透明效果有什么不同

• rgba()和 opacity 都能实现透明效果.
  最大的不同是 opacity 作用于元素，以及元素内的所有 内容的透明度
• rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

CSS3 动画和 JS 动画主要的不同点是什么？

1. 功能涵盖面，JS 比 CSS3 大
   ①定义动画过程的@keyframes 不支持递归定义，如果有多种类似的动画过程，需要 调节多个参数来生成的话，将会有很大的冗余（比如 jQuery Mobile 的动画方案），而 JS 则天然可 以以一套函数实现多个不同的动画过程
   ② 时间尺度上，@keyframes 的动画粒度粗，而 JS 的动画粒度控制可以很细
   ③ CSS3 动画里被支持的时间函数非常少，不够灵活
   ④ 以现有的接口，CSS3 动画无法做到支持两个以上的状态转化
2. 实现/重构难度不一，CSS3 比 JS 更简单，性能调优方向固定
3. 对于帧速表现不好的低版本浏览器，CSS3 可以做到自然降级，而 JS 则需要撰写额外代码
4. CSS 动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前 缀），JS 则需要自己写事件
5. CSS3 有兼容性问题，而 JS 大多时候没有兼容性问题