CSS3 新特性

CSS3 引入了许多新特性和模块，显著增强了 CSS 的功能和表现力。以下是一些主要的新特性：

目录

1. 选择器

2. 盒模型

3. 背景与边框

4. 文字与字体

5. 弹性盒子布局 (Flexbox)

6. 网格布局 (Grid)

7. 动画与过渡

8. 媒体查询

9. 渐变

10. 其他特性

1. 选择器

• 伪元素和伪类：新增了一些伪类选择器，如 :nth-child()、:nth-of-type()、:last-child、:first-of-type 等，提供更灵活的元素选择。
• 属性选择器：可根据元素的属性值选择元素。

  a[href] { color: blue; } /* 选择所有带有 href 属性的链接 */复制

感兴趣的可以看看我的另一篇文章，详细介绍了伪类选择器。

2. 盒模型

• box-sizing：使用 box-sizing: border-box; 可以让宽度和高度包含内边距和边框，不再影响布局计算。

  * {
      box-sizing: border-box;
  }
   复制

感兴趣的可以看看我的另一篇文章，详细介绍盒模型。

3. 背景与边框

• 多背景：支持为元素设置多个背景图像。

  .example {
      background-image: url('bg1.png'), url('bg2.png');
  }复制

• 边框圆角：通过 border-radius 属性实现元素的圆角效果。

  .rounded {
      border-radius: 10px;
  }复制

• 边框阴影和文本阴影：可以使用 box-shadow 为元素添加阴影，以及使用 text-shadow 为文本添加阴影。

  .shadow {
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
  .text-shadow {
      text-shadow: 1px 1px 2px black;
  }复制

4. 文字与字体

• Web 字体：可以使用 @font-face 引入自定义字体。

  @font-face {
      font-family: 'MyFont';
      src: url('myfont.woff2') format('woff2');
  }复制

• 文本效果：增加了一些文本相关的效果，如 word-wrap、text-overflow、white-space 控制等。

5. 弹性盒子布局 (Flexbox)

• Flexbox：新的布局模式，使得在不同屏幕和容器中更容易地对齐和分配空间。

  .container {
      display: flex;
      justify-content: space-between;
  }复制

感兴趣的可以看看我的另一篇文章，详细介绍弹性盒子布局 (Flexbox)

6. 网格布局 (Grid)

• CSS Grid Layout：一种二维布局模型，可以创建复杂的网格布局。

  .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
  }复制

感兴趣的可以看看我的另一篇文章，详细介绍网格布局 (Grid)

7. 动画与过渡

• 过渡效果：使用 transition 属性可以实现元素属性的平滑过渡效果。

  .box {
      transition: background-color 0.5s;
  }
  .box:hover {
      background-color: red;
  }复制

• 关键帧动画：使用 @keyframes 定义动画，可以创建连续的动画效果。

  @keyframes slide {
      from { transform: translateX(0); }
      to { transform: translateX(100px); }
  }
  .animate {
      animation: slide 1s infinite;
  }复制

感兴趣的可以看看我的另一篇文章，详细介绍动画与过渡

8. 媒体查询

• 响应式设计：使用媒体查询进行响应式布局设计，支持不同设备和屏幕尺寸。

  @media (max-width: 600px) {
      .container {
          flex-direction: column;
      }
  }复制

感兴趣的可以看看我的另一篇文章，详细介绍媒体查询

9. 渐变

• 渐变背景：可以通过 linear-gradient 和 radial-gradient 创建渐变背景。

  .gradient {
      background: linear-gradient(to right, red, blue);
  }复制

10. 其他特性

• 自定义属性 (CSS Variables)：使用 --variable-name 定义自定义属性，并通过 var(--variable-name) 使用。

  :root {
      --main-color: blue;
  }
  .element {
      color: var(--main-color);
  }复制

• 过滤效果：使用 filter 属性添加图像效果，比如模糊、灰度等。

  .blur {
      filter: blur(5px);
  }复制

以上是 CSS3 中的一些重要新特性，它们极大地丰富了 web 开发中的样式设计能力，提供了更多的灵活性和表现力，使得开发者能够更容易地创建美观和响应式的用户界面。