CSS3的核心功能介绍及实战使用示例

以下是CSS3的核心功能介绍及实战使用示例，涵盖选择器、布局、动画、样式增强等方面，结合代码演示：

---

一、选择器升级

CSS3新增多种选择器，精准定位元素：

1. 伪类选择器

   • :hover（鼠标悬停）：

     a:hover { color: red; } /* 链接悬停变红 */
     

   • :nth-child(n)（第n个子元素）：

     li:nth-child(2) { text-decoration: underline; } /* 第二个列表项下划线 */
     

   • :not()（排除匹配）：

     div:not(.active) { opacity: 0.5; } /* 非active类的div半透明 */
     

2. 伪元素选择器

   • ::before/::after（插入内容）：

     p::before { content: "✨ "; } /* 段落前添加星星 */
     

   • ::first-letter（首字母样式）：

     p::first-letter { font-size: 2em; } /* 首字母放大 */
     

---

二、布局革新

1. Flexbox弹性布局

• 容器属性：

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

• 项目属性：

  .item { flex: 1; /* 等比例伸缩 */ }
  

• 实战示例：

  <div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>
  

2. Grid网格布局

• 二维网格定义：

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  

• 跨行/列设置：

  .item-2 { grid-column: span 2; } /* 跨越两列 */
  

• 实战示例：

  <div class="grid"><div class="item">A</div><div class="item">B</div><div class="item item-2">C</div>
  </div>
  

---

三、动画与过渡

1. 过渡（Transition）

• 平滑变化：

  .box { transition: transform 0.5s ease; }
  .box:hover { transform: scale(1.1); } /* 悬停放大 */
  

2. 关键帧动画（@keyframes）

• 旋转动画：

  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .icon { animation: spin 2s infinite linear; }
  

---

四、样式增强

1. 边框与背景

   • 圆角边框：

     .card { border-radius: 10px; } /* 圆角效果 */
     

   • 渐变背景：

     .header { background: linear-gradient(to right, #f00, #ff0); } /* 线性渐变 */
     

   • 图像边框：

     .frame { border-image: url('border.png') round; } /* 自定义边框图像 */
     

2. 文本与字体

   • 文字阴影：

     h1 { text-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
     

   • 自定义字体：

     @font-face { font-family: 'MyFont'; src: url('font.woff2'); }
     .text { font-family: 'MyFont', sans-serif; }
     

3. 透明度与阴影

   • 半透明背景：

     .overlay { background-color: rgba(0,0,0,0.5); }
     

   • 盒阴影：

     .card { box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* 阴影效果 */
     

---

五、响应式设计

1. 媒体查询（Media Query）

• 适配不同屏幕：

  @media (max-width: 768px) { .menu { flex-direction: column; } } /* 移动端垂直排列 */
  

2. 弹性单位

• 相对单位：

  .container { width: 80%; } /* 百分比宽度 */
  

---

六、实战综合示例

场景：响应式导航栏 + 动画卡片

<style>body { font-family: 'Arial', sans-serif; margin: 0; }.nav { display: flex; justify-content: space-between; padding: 10px; }.card { width: 30%; margin: 10px; background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s; }.card:hover { transform: translateY(-10px); } /* 悬浮动画 */@media (max-width: 768px) { .card { width: 80%; } } /* 移动端适配 */
</style>
<div class="nav"><h1>Logo</h1><div>Menu 1 | Menu 2 | Menu 3</div>
</div>
<div class="card">Content 1</div>
<div class="card">Content 2</div>
<div class="card">Content 3</div>

---

七、总结与技巧

1. 浏览器兼容：部分CSS3属性需添加前缀（如-webkit-）。
2. 性能优化：避免过度使用动画和复杂选择器。
3. 开发工具：使用Chrome DevTools实时调试样式。

通过以上功能，CSS3可显著提升网页的美观性、交互性和开发效率，是现代前端开发的基石。