CSS3 新特性学习

Posted 2021-06-21 GoldenaArcher

CSS3 新特性学习

来自 黑马程序员 pink 老师前端入门教程，零基础必看的 h5(html5)+css3+web 前端视频教程 的内容，从 p280 开始到 p296 结束。

主要讲的新特性具有以下两个特点：

1. 开发常用的新特性
2. 部分在这个教程内用得到的新特性
3. 兼容性是有问题的，IE9 以上才支持

新增的选择器

在 CSS 选择符 也有提到过一些，其实想要了解更多的话还是看看 MDN 这样的文档比较好。

• 属性选择器

  关于属性选择器这部分，我在制作 学成在线 制作分解版 时，也有使用。导航栏中的搜索的样式配饰就使用了属性选择器，当然，属性选择器还有更多的用途，这也是刚开始就需要设计好的所有输入框的行为。

• 结构伪类选择器

  例如说 nth-child 之类的结构伪类选择器，在 学成在线 制作分解版 中的案例也有使用。

  在 学成在线-静态页面终结版 中也描述了怎么使用结构伪类选择器对组件进行封装。无独有偶，视频中 pink 老师也选择了使用 nth-child 去降低代码的复杂性。

• 伪元素选择器

  CSS 选择符 中的案例是「精通 CSS 高级 Web 标准解决方案」里面的，做出来的效果真的非常酷炫:

  

  其正文内容只有标题和内容，其他的样式全都是靠 CSS 完成的，其中大量运用了伪元素的使用。

  除了书中的特效外，视频中也列举了一些常用的伪元素的使用场景，我选取了一个案例用伪元素实现了：

  

盒子模型

在 CSS 盒子模型 提到了盒子模型的两种不同的计算方式，针对这种情况，CSS3 新增了一个属性为 box-sizing，使得开发可以自主选择想要使用的盒子模型。

图片模糊处理

filter 属性为 blur，目前作为一个了解就够了，「精通 CSS 高级 Web 标准解决方案」的第 11 章会更加深入说明。

filter 是滤镜的意思，除了模糊之外，应该还是能够加入其他更多的滤镜。

calc

calc() 是一个计算方式，主要可以混用不同的格式。

在伪元素的案例之中我也使用了 calc() 去计算居中的方式

过渡

同样，这个视频中主要讲怎么用，之后在「精通 CSS 高级 Web 标准解决方案」的第 10 章会进入更加深入的学习。

基础语法：

div {
  /*
transition: 过渡的属性 时间 运动曲线 开始时间,
            过渡的属性2 时间2 运动曲线2 开始时间2 ;
*/
  transition: width 1s ease 1s, height 1s ease 1s;
  /* 如果多个属性都一样，则可以使用 all */
  transition: all 1s ease 0s;
}

• 属性

  想要变化的 CSS 属性，例如说宽度、高度、背景颜色等，想要全部的属性都有变化，就写一个 all

• 时间

  单位必须是秒（s）

• 运动曲线

  默认是 ease，可省略

• 开始时间

  单位必须是秒（s），可以设置延迟触发，默认是 0s，可省略

实现了一个移动的 zombie：

具体的案例可以参考 CSS3 新特性学习案例：CSS3 新特性学习案例。