CSS3新特性

新特性简介

1. 强大的 CSS3 选择器
2. 抛弃图片的视觉效果
3. 盒模型变化（多列布局和弹性盒模型）
4. 阴影效果
5. Web 字体和 Web Font 图标
6. CSS3 过渡与动画交互效果
7. 媒体查询

案例

github.com/Jennie-duo/…

如何查询浏览器市场份额？

tongji.baidu.com/research/

浏览器对CSS3的支持情况：

如何分辨属性是否需要添加浏览器前缀：caniuse.com/

渐进增强和优雅降级

• 渐进增强：先满足大部分浏览器，发布产品后再慢慢地改进每个浏览器的效果，让每个浏览器使用 CSS3 。
• 优雅降级：先满足大部分用户，先改进用户量最多的浏览器，上线后再挨个满足各个浏览器，进行一定的改变

以下以 Chrome 浏览器为主，采用优雅降级的方式

第一章

环境搭建

1. 打开 Chrome 官网 下载 Chrome 浏览器
2. 在 Vscode 编辑器中安装前缀插件:Autoprefixer

伪类选择器

什么是伪类选择器？

不存在于 HTML 中，但是我们用 CSS 的巧妙语法能够选择它们，并对它们进行渲染修饰

动态伪类选择器

• 不存在于 HTML 中，只有我们动态交互的时候,才能使用 CSS 动态伪类选择器，给它们进行样式的渲染。
• 使用最多的是 a 标签，例如 hover、visited、active、link。

UI 元素状态伪类选择器

• 重点是状态两个字，我们在写 HTML 的时候，在一些标签里面是有状态的。
• 例如：文本框 input type=“text”,有 enabled 和 disabled 两种状态。

结构伪类选择器（ CSS3 新增内容）

• 结构伪类选择器的出现大大简化了 HTML 的文本结构，让 HTML 更语义化、更结构化，减少了 class 和 id 的使用，利用我们新增加的这些选择器就能很好的选择重复的标签。
  1. :first-child 选择某个元素的第一个子元素；
  2. :last-child 选择某个元素的最后一个子元素；
  3. :nth-child() 选择某个元素的一个或多个特定的子元素；
     • 隔行换色使用 2n 或 2n+1 参数 。
     • 另：odd 代表奇数行，even 代表偶数行。
     • 选择第 n 个元素后的所有元素，使用 n+5 参数。
     • 每隔 n 行变色使用 （n+1）n +1 参数，n 相当于一个循环。
  4. :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的 最后一个子元素开始算；
  5. :nth-of-type() 选择指定的元素；
     • 和 nth-child 用法类似，但是限定了元素类型。
  6. :nth-last-of-type() 选择指定的元素 从元素的最后一个开始计算；
  7. :first-of-type 选择一个上级元素下的第一个同类子元素；
  8. :last-of-type 选择一个上级元素的最后一个同类子元素；
  9. :only-child 选择的元素是它的父元素的唯一 一个子元素；
  10. :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  11. :empty 选择的元素里面没有任何内容。

生成列表快捷键：ul>li*10>a

伪元素

什么是伪元素？

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素	作用	IE	F	N	W3C
::first-letter	将特殊的样式添加到文本的首字母	5	1	8	1
::first-line	将特殊的样式添加到文本的首行	5	1	8	1
::before	在某元素之前插入某些内容		1.5	8	2
::after	在某元素之后插入某些内容		1.5	8	2

CSS3 之后，为了区别伪类选择器和伪元素，在伪元素前加两个 ::

::before 和 ::after 相当于 在 element 和 content 之间多了两个图层，改善了 CSS 布局能力的不足,且 ::before 和 ::after 属性中必须有 ‘content:’ 属性，content 属性可以为空 ‘’

第二章

CSS3 的变形

用 border-radius 画圆形

Border-radius 的优点：

1. 减少网站的维护工作量
2. 提高网站性能
3. 增加了视觉美观性

 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
 border-bottom-right-radius: 50%;
 border-bottom-left-radius: 50%;
 border-top-left-radius: 100px 50px;// x轴 y轴 
 border-radius:100px 100px 0px 0px;//左上角开始顺时针方向 

画多边形

画三角形和对话效果

用::before 伪元素画一个三角形，然后用相对定位把三角形放在对话框的左边

border-top: 10px solid t