关于番外篇-CSS3新增特性

CSS3 引入了许多新的特性和功能，极大地扩展了网页设计和开发的能力。下面是一些主要的新增特性：

1. 选择器（Selectors）

• 属性选择器（Attribute Selectors）：允许根据属性值选择元素。

  css复制代码

  a[href^="https"] { color: green; } /* 选择以 https 开头的链接 */
• 伪类选择器：
  • :nth-child()：允许选择一个父元素下特定的子元素。

    css复制代码

    div:nth-child(2) { color: red; } /* 选择第二个子元素 */
  • :not()：选择不匹配某些条件的元素。

    css复制代码

    p:not(.special) { color: gray; }

2. 盒模型（Box Model）

• box-sizing：控制盒子模型的计算方式，可以让宽高包含内边距和边框。

  css复制代码

  div { box-sizing: border-box; } 默认情况下，width 和 height 只包含内容的尺寸，但使用 box-sizing: border-box; 会让它们包括内边距和边框。

3. 圆角（Border Radius）

• border-radius：用于设置元素的圆角效果。
  div { border-radius: 10px; }

4. 阴影效果（Box Shadows and Text Shadows）

• box-shadow：为元素添加阴影效果。
  div { box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); }
• text-shadow：为文本添加阴影效果。
  h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }

5. 渐变（Gradients）

• 线性渐变（linear-gradient）：设置从一个颜色渐变到另一个颜色。
  background: linear-gradient(to right, red, yellow);
• 放射性渐变（radial-gradient）：从中心向外渐变。
  background: radial-gradient(circle, red, blue);

6. 背景（Background）

• 多重背景：可以为元素设置多个背景图。
  background: url(image1.png), url(image2.png);
• background-size：控制背景图的大小。
  background-size: cover; /* 背景图像自适应覆盖整个元素 */

7. 弹性布局（Flexbox）

• Flexbox：用于更灵活和高效地布局和对齐元素。

  css复制代码

  .container { display: flex; justify-content: space-between; } .item { flex: 1; }

8. 网格布局（CSS Grid）

• CSS Grid：创建二维网格布局。
  .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item { grid-column: span 2; }

9. 过渡（Transitions）

• transition：使元素在状态改变时平滑过渡。
  div { transition: all 0.3s ease; } div:hover { background-color: yellow; }

10. 动画（Animations）

• @keyframes：定义动画的关键帧，可以制作更复杂的动画效果。
  @keyframes example { 0% { background-color: red; } 100% { background-color: blue; } } div { animation: example 2s infinite; }

11. 媒体查询（Media Queries）

• 响应式设计：通过媒体查询，CSS可以根据设备的特性（如屏幕宽度）调整样式。
  @media (max-width: 600px) { .container { flex-direction: column; } }

12. 视差滚动（Parallax Scrolling）

• 背景固定和滚动效果：CSS3可以通过 background-attachment 实现视差滚动效果。
  body { background: url('background.jpg') fixed; }

13. 自定义属性（CSS Variables）

• CSS变量：允许在CSS中定义可重用的值，方便管理和修改。
  :root { --main-color: #3498db; } .box { background-color: var(--main-color); }

14. 多列布局（Multi-column Layouts）

• 多列布局：通过CSS设置文本或内容分为多列。
  .column { column-count: 3; column-gap: 20px; }

15. 文本溢出处理（Text Overflow）

• text-overflow：设置文本溢出时的处理方式，通常用于显示省略号。
  div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

16. 变换（Transforms）

• transform：对元素进行旋转、缩放、倾斜或平移。
  div { transform: rotate(45deg); }

17. 计时函数（Timing Functions）

• CSS3引入了多种计时函数来控制动画和过渡的速度。
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

18. 视口单位（Viewport Units）

• vw, vh, vmin, vmax：相对于视口宽度和高度的单位，便于响应式设计。
  div { width: 50vw; } /* 视口宽度的一半 */

19. 字体（Font Face）

• @font-face：允许使用自定义字体。
  @font-face { font-family: "MyFont"; src: url("myfont.woff2") format("woff2"); } body { font-family: "MyFont", sans-serif; }

总结：

CSS3引入了大量新特性，使得网页设计更加灵活、现代和富有表现力。通过合理使用这些新特性，开发者可以创造出更加复杂和美观的网页布局和用户体验。