CSS3 视觉效果

🎨

1. 布局相关 📏

• Flex 弹性布局 💪
  • 单行单列布局
• Grid 网格布局 🔲
  • 多行多列布局

2. 视觉样式 ✨

2.1 阴影效果 🌓

• 盒子阴影 box-shadow 📦
  • 内阴影
  • 外阴影
  • 多重阴影
• 文字阴影 text-shadow 📝
  • 单层阴影
  • 多层阴影

2.2 圆角与边框 🔲

• 圆角 border-radius ⭕
• 图片边框 border-image 🖼️
• 多重边框 ⚡

2.3 渐变效果 🌈

• 线性渐变 linear-gradient ➡️
• 径向渐变 radial-gradient 🔄
• 重复渐变 🔁

2.4 2D/3D 变形 🎲

• 平移 translate ↔️
• 缩放 scale 🔍
• 旋转 rotate 🔄
• 倾斜 skew ⟥
• 矩阵变换 matrix 📐

3. 动态效果 🎬

• 过渡 transition 🔄
  • 属性
  • 持续时间
  • 时间函数
  • 延迟时间
• 动画 animation ✨
  • 关键帧
  • 动画属性
  • 时间控制
  • 播放方式

3. 盒模型类型 📦

• box-sizing: content-box 📥
  • 标准盒模型
  • width/height 只包含内容区域的尺寸
  • padding 和 border 会额外增加元素的实际占用空间
• box-sizing: border-box 📤
  • IE 盒模型
  • width/height 包含内容、内边距和边框的总尺寸
  • 更直观的尺寸控制方式

4. 图像内容适应 (object-fit) 🖼️

object-fit 属性用于控制替换元素(如 <img> 或 <video>)内容在其容器中的填充方式。当元素设置了固定的宽高时，此属性可以精确控制内容的展示效果。

主要取值包括：

• fill 🔲：默认值，内容会被拉伸以填充整个容器，可能会导致宽高比失真
• contain 📥：保持原始宽高比，确保内容完整显示，可能会出现空白区域
• cover 📤：保持原始宽高比，填满整个容器，超出部分会被裁剪
• none ⭕：保持原始尺寸，忽略容器的宽高设置
• scale-down 🔍：自动在 none 和 contain 之间选择较小的尺寸

5. 视口单位 (Viewport Units) 📱

视口单位是相对于浏览器可视区域的尺寸计算的相对单位：

• vw (Viewport Width) ↔️：视口宽度的 1/100
• vh (Viewport Height) ↕️：视口高度的 1/100
• vmin ⬇️：取 vw 和 vh 中的较小值
• vmax ⬆️：取 vw 和 vh 中的较大值

常用场景：

• 全屏布局 🖥️
• 响应式设计 📱
• 字体大小自适应 📝

6. 伪元素选择器 🎯

伪元素用于创建一些不在文档树中的元素，并为其添加样式。最常用的伪元素包括：

• ::before ⬅️ - 在元素内容之前插入内容
• ::after ➡️ - 在元素内容之后插入内容
• ::first-line 📝 - 选择元素的第一行
• ::first-letter 📌 - 选择元素的第一个字母

注意事项：

• 伪元素必须有 content 属性才能生效 ✅
• 单冒号(:)和双冒号(::)的区别：
  • 单冒号是 CSS2 的语法 🔹
  • 双冒号是 CSS3 的语法，用来区分伪类和伪元素 🔸
• 伪元素默认是行内元素 📝
• 不能在替换元素(如 img、input 等)上使用 ⚠️

常见应用场景：

• 添加装饰性内容 🎨
• 清除浮动 🧹
• 创建三角形等图形 ▶️
• 添加提示信息 💬

6. 平滑滚动 (Smooth Scroll) 🔄

CSS 提供了原生的平滑滚动功能，可以让页面滚动变得更加流畅自然。

实现方式：

• 全局设置：scroll-behavior: smooth 🌊
• 容器设置：overflow: auto 配合 scroll-behavior: smooth 🔄

常见应用：

• 页面内锚点跳转 🔗
• 返回顶部按钮 ⬆️
• 滚动导航 📍