关于番外篇-CSS3新增特性

CSS3 引入了许多新的特性和功能，极大地扩展了网页计划和开发的本领。下面是一些重要的新增特性：
1. 选择器（Selectors）

• 属性选择器（Attribute Selectors）：答应根据属性值选择元素。
  1. [/code]        css复制代码
  2.         a[href^="https"] { color: green; } /* 选择以 https 开头的链接 */
  3. [*][b]伪类选择器[/b]：
  4. [list]
  5. [*]:nth-child()：答应选择一个父元素下特定的子元素。                [code]

  复制代码
          css复制代码
                  div:nth-child(2) { color: red; } /* 选择第二个子元素 */
  
• :not()：选择不匹配某些条件的元素。       
  1. [/code]                css复制代码
  2.                 p:not(.special) { color: gray; }
  3. [/list]
  4. [/list][size=3]2. [b]盒模子（Box Model）[/b][/size]
  6. [list]
  7. [*][b]box-sizing[/b]：控制盒子模子的盘算方式，可以让宽高包罗内边距和边框。        [code]

  复制代码
  css复制代码
          div { box-sizing: border-box; } 默认环境下，width 和 height 只包罗内容的尺寸，但利用 box-sizing: border-box; 会让它们包罗内边距和边框。
  

3. 圆角（Border Radius）

• border-radius：用于设置元素的圆角结果。
  1. [/code]        div { border-radius: 10px; }
  2. [/list][size=3]4. [b]阴影结果（Box Shadows and Text Shadows）[/b][/size]
  4. [list]
  5. [*][b]box-shadow[/b]：为元素添加阴影结果。        [code]

  复制代码
  div { box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); }
  
• text-shadow：为文本添加阴影结果。
  1. [/code]        h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
  2. [/list][size=3]5. [b]渐变（Gradients）[/b][/size]
  4. [list]
  5. [*][b]线性渐变（linear-gradient）[/b]：设置从一个颜色渐变到另一个颜色。        [code]

  复制代码
  background: linear-gradient(to right, red, yellow);
  
• 放射性渐变（radial-gradient）：从中央向外渐变。
  1. [/code]        background: radial-gradient(circle, red, blue);
  2. [/list][size=3]6. [b]配景（Background）[/b][/size]
  4. [list]
  5. [*][b]多重配景[/b]：可以为元素设置多个配景图。        [code]

  复制代码
  background: url(image1.png), url(image2.png);
  
• background-size：控制配景图的巨细。
  1. [/code]        background-size: cover; /* 配景图像自顺应覆盖整个元素 */
  2. [/list][size=3]7. [b]弹性布局（Flexbox）[/b][/size]
  4. [list]
  5. [*][b]Flexbox[/b]：用于更机动和高效地布局和对齐元素。        [code]

  复制代码
  css复制代码
          .container { display: flex; justify-content: space-between; } .item { flex: 1; }
  

8. 网格布局（CSS Grid）

• CSS Grid：创建二维网格布局。
  1. [/code]        .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item { grid-column: span 2; }
  2. [/list][size=3]9. [b]过渡（Transitions）[/b][/size]
  4. [list]
  5. [*][b]transition[/b]：使元素在状态改变时平滑过渡。        [code]

  复制代码
  div { transition: all 0.3s ease; } div:hover { background-color: yellow; }
  

10. 动画（Animations）

• @keyframes：界说动画的关键帧，可以制作更复杂的动画结果。
  1. [/code]        @keyframes example { 0% { background-color: red; } 100% { background-color: blue; } } div { animation: example 2s infinite; }
  2. [/list][size=3]11. [b]媒体查询（Media Queries）[/b][/size]
  4. [list]
  5. [*][b]相应式计划[/b]：通过媒体查询，CSS可以根据装备的特性（如屏幕宽度）调解样式。        [code]

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

12. 视差滚动（Parallax Scrolling）

• 配景固定和滚动结果：CSS3可以通过 background-attachment 实现视差滚动结果。
  1. [/code]        body { background: url('background.jpg') fixed; }
  2. [/list][size=3]13. [b]自界说属性（CSS Variables）[/b][/size]
  4. [list]
  5. [*][b]CSS变量[/b]：答应在CSS中界说可重用的值，方便管理和修改。        [code]

  复制代码
  :root { --main-color: #3498db; } .box { background-color: var(--main-color); }
  

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

• 多列布局：通过CSS设置文本或内容分为多列。
  1. [/code]        .column { column-count: 3; column-gap: 20px; }
  2. [/list][size=3]15. [b]文本溢出处理惩罚（Text Overflow）[/b][/size]
  4. [list]
  5. [*][b]text-overflow[/b]：设置文本溢出时的处理惩罚方式，通常用于体现省略号。        [code]

  复制代码
  div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  

16. 变更（Transforms）

• transform：对元素举行旋转、缩放、倾斜或平移。
  1. [/code]        div { transform: rotate(45deg); }
  2. [/list][size=3]17. [b]计时函数（Timing Functions）[/b][/size]
  4. [list]
  5. [*]CSS3引入了多种计时函数来控制动画和过渡的速率。        [code]

  复制代码
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  

18. 视口单元（Viewport Units）

• vw, vh, vmin, vmax：相对于视口宽度和高度的单元，便于相应式计划。
  1. [/code]        div { width: 50vw; } /* 视口宽度的一半 */
  2. [/list][size=3]19. [b]字体（Font Face）[/b][/size]
  4. [list]
  5. [*][b]@font-face[/b]：答应利用自界说字体。        [code]

  复制代码
  @font-face { font-family: "MyFont"; src: url("myfont.woff2") format("woff2"); } body { font-family: "MyFont", sans-serif; }
  

总结：

CSS3引入了大量新特性，使得网页计划更加机动、当代和富有体现力。通过公道利用这些新特性，开发者可以创造出更加复杂和雅观的网页布局和用户体验。