第16章 了解CSS3层叠样式表

102 阅读2分钟

1.CSS3 概述

  • CSS3CSS2 的升级版本,它在 CSS2 的基础上,新增了很多强大的新功能,从而解决一些实际 面临的问题。

  • CSS3 在未来会按照模块化的方式去发展: www.w3.org/Style/CSS/c…

  • CSS3 的新特性如下:

    • 新增了更加实用的选择器,例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。
    • 新增了更好的视觉效果,例如:圆角、阴影、渐变等。
    • 新增了丰富的背景效果,例如:支持多个背景图片,同时新增了若干个背景相关的属性。
    • 新增了全新的布局方案 —— 弹性盒子。
    • 新增了 Web 字体,可以显示用户电脑上没有安装的字体。
    • 增强了颜色,例如: HSLHSLARGBA 几种新的颜色模式,新增 opacity 属性来控制 透明度。
    • 增加了 2D3D 变换,例如:旋转、扭曲、缩放、位移等。
    • 增加动画与过渡效果,让效果的变换更具流线性、平滑性。 ……

2. CSS3私有前缀

2.1 什么是私有前缀

如下代码中的 -webkit- 就是私有前缀

div {
      width:400px; 
      height:400px; 
     -webkit-border-radius: 20px; 
 }

2.2 为什么要有私有前缀

  • W3C 标准所提出的某个 CSS 特性,在被浏览器正式支持之前,浏览器厂商会根据浏览器的内核, 使用私有前缀来测试该 CSS 特性,在浏览器正式支持该 CSS 特性后,就不需要私有前缀了。
  • 举个例子:
  div { 
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px; 
      -ms-border-radius: 20px; 
      -o-border-radius: 20px; 
      border-radius: 20px;
 } 

2.3 常见浏览器私有前缀

  • Chrome 浏览器: -webkit-
  • Safari 浏览器: -webkit-
  • Firefox 浏览器: -moz-
  • Edge 浏览器: -webkit-
  • Opera 浏览器: -o-
  • IE 浏览器: -ms-
⚠注意

我们在编码时,不用过于关注浏览器私有前缀,不用绞尽脑汁的去记忆,也不用每个都去查询,因 为常用的 CSS3 新特性,主流浏览器都是支持的,即便是为了老浏览器而加前缀,我们也可以借助 现代的构建工具,去帮我们添加私有前缀。