css3的新特性知识点

CSS3作为CSS的升级版，引入了许多新的特性，以下是一些值得关注的知识点：

1. 新增选择器

CSS3新增了众多的选择器，常见的有：

  /* 属性选择器 */
  [attr=value] { ... }
  /* 子字符串选择器 */
  [attr^=value] { ... }
  [attr$=value] { ... }
  [attr*=value] { ... }
  /* 伪类选择器 */
  :target { ... }
  :not(selector) { ... }
  /* 伪元素选择器 */
  ::before { ... }
  ::after { ... }

2. Box-sizing属性

这个属性可以让我们更方便地设置盒子模型的宽高，常用的有两个值：

  Box-sizing: content-Box; /* 默认值，指定的宽高不包含内边距和边框 */
  Box-sizing: border-Box; /* 指定的宽高包含内边距和边框 */

3. CSS3动画

CSS3的动画相比JavaScript动画更易实现和维护，常用的属性和方法包括：

  /* 设置动画的名称、时长、缓动函数、延迟时间等 */
  animation: name duration timing-function delay;
  /* 定义一个动画的关键帧 */
  @keyframes name {
    0% { ... }
    50% { ... }
    100% { ... }
  }

4. 渐变效果

CSS3支持多种渐变效果，包括线性渐变、径向渐变、重复渐变等，用法如下：

  /* 线性渐变 */
  background: linear-gradient(direction,color-stop1,color-stop2,...);
  /* 径向渐变 */
  background: radial-gradient(center,shape size,...);
  /* 重复渐变 */
  background: repeating-linear-gradient(direction,...);

5. Flex布局

Flex布局是CSS3提供的一种新布局方式，可以轻松实现弹性布局，常用的属性包括：

  /* 设置容器的方向 */
  flex-direction: row/column;
  /* 设置容器内部的元素如何排列和分配空间 */
  justify-content: center/flex-start/flex-end/space-between/space-around;
  align-items: center/flex-start/flex-end/baseline/strech;

总结

CSS3的新特性给前端开发带来了很多便利，以上介绍的知识点仅仅是冰山一角，大家可以深入学习更多的CSS3特性来提升自己的前端技能。