CSS3 新特性

CSS3 带来了大量令人兴奋的新特性，这些特性极大地扩展了网页设计的可能性。从更强大的选择器到灵活的布局系统，从丰富的视觉效果到流畅的动画过渡，CSS3 为开发者提供了创建现代化网页界面的完整工具集。

新增的选择器

CSS3 引入了许多强大的新选择器，使得选择元素变得更加精确和灵活。

属性选择器增强

CSS3 增强了属性选择器的功能，提供了更多的匹配方式：

/* 以值开头 */
a[href^="https://"] {
  color: green;
}

/* 以值结尾 */
a[href$=".pdf"] {
  color: red;
}

/* 包含值 */
input[class*="form"] {
  border: 1px solid blue;
}

/* 包含单词 */
input[class~="required"] {
  border: 1px solid red;
}

/* 以值开头或值-开头 */
div[lang|="zh"] {
  font-family: "Microsoft YaHei", sans-serif;
}

实际应用场景：

• 区分不同协议的链接
• 识别特定类型的文件链接
• 选择包含特定类名的元素
• 根据语言选择元素

结构伪类选择器

结构伪类选择器允许基于文档结构选择元素：

/* 第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 最后一个子元素 */
li:last-child {
  margin-bottom: 0;
}

/* 第n个子元素 */
li:nth-child(odd) {
  background: #f5f5f5;
}

/* 倒数第n个子元素 */
li:nth-last-child(2) {
  color: red;
}

/* 某种类型的第n个元素 */
p:nth-of-type(2) {
  color: blue;
}

/* 唯一的子元素 */
div:only-child {
  width: 100%;
}

/* 空元素 */
div:empty {
  display: none;
}

/* 根元素 */
:root {
  --primary-color: #007bff;
}

实际应用场景：

• 创建斑马纹表格
• 设置列表首尾元素的样式
• 选择特定位置的元素
• 处理空元素

目标伪类选择器

:target 选择器用于选择当前活动的目标元素：

/* 目标伪类选择器 */
:target {
  background: yellow;
  padding: 10px;
}

/* 实际应用 */
.section:target {
  animation: highlight 2s;
}

@keyframes highlight {
  0%, 100% {
    background: white;
  }
  50% {
    background: yellow;
  }
}

实际应用场景：

• 页面内导航高亮
• 锚点跳转效果
• 模态框显示

UI 状态伪类选择器

UI 状态伪类选择器用于选择特定状态的表单元素：

/* 启用的元素 */
input:enabled {
  background: white;
}

/* 禁用的元素 */
input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* 选中的复选框 */
input:checked + label {
  color: green;
}

/* 有效的输入 */
input:valid {
  border: 1px solid green;
}

/* 无效的输入 */
input:invalid {
  border: 1px solid red;
}

/* 必填字段 */
input:required {
  border-left: 3px solid red;
}

/* 只读字段 */
input:read-only {
  background: #f5f5f5;
}

/* 可编辑字段 */
input:read-write {
  background: white;
}

实际应用场景：

• 表单验证样式
• 禁用状态的视觉反馈
• 必填字段的标识
• 表单交互效果

否定伪类选择器

:not() 选择器用于选择不匹配指定选择器的元素：

/* 排除特定元素 */
p:not(.intro) {
  text-indent: 2em;
}

/* 排除第一个子元素 */
li:not(:first-child) {
  border-top: 1px solid #ddd;
}

/* 排除特定类 */
div:not(.no-padding) {
  padding: 20px;
}

/* 复杂否定 */
a:not([href^="http"]):not([href^="https"]) {
  color: gray;
}

实际应用场景：

• 排除特定样式的元素
• 批量设置样式但排除特殊情况
• 简化选择器编写

伪元素选择器

CSS3 将伪元素从单冒号改为双冒号，并新增了一些伪元素：

/* 文本首字母 */
p::first-letter {
  font-size: 2em;
  color: red;
}

/* 文本首行 */
p::first-line {
  font-weight: bold;
}

/* 选中的文本 */
::selection {
  background: yellow;
  color: black;
}

/* 占位符文本 */
input::placeholder {
  color: #999;
}

/* 前后插入内容 */
.element::before {
  content: "前缀：";
  color: red;
}

.element::after {
  content： "后缀";
  color: blue;
}

实际应用场景：

• 文本装饰效果
• 选中文本的样式
• 表单占位符样式
• 图标和装饰元素的插入

新增的属性

CSS3 引入了许多新的属性，极大地扩展了样式控制能力。

文本属性增强

/* 文本阴影 */
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* 文本溢出处理 */
.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 单词换行 */
.long-word {
  word-wrap: break-word;
  word-break: break-all;
}

背景属性增强

/* 背景尺寸 */
.background {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

/* 多重背景 */
.multi-background {
  background:
    url('image1.png') no-repeat top right,
    url('image2.png') no-repeat bottom left,
    linear-gradient(to bottom, #fff, #000);
}

/* 背景裁剪和原点 */
.box {
  background-clip: content-box;
  background-origin: content-box;
}

边框属性增强

/* 边框圆角 */
.rounded {
  border-radius: 10px;
}

/* 盒阴影 */
.shadow {
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

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

颜色和透明度

/* RGBA 颜色 */
.rgba {
  color: rgba(255, 0, 0, 0.5);
}

/* HSL 颜色 */
.hsl {
  color: hsl(120, 100%, 50%);
}

/* 透明度 */
.transparent {
  opacity: 0.5;
}

新增的布局方式

CSS3 提供了更强大和灵活的布局系统。

弹性盒子布局（Flexbox）

/* Flex 容器 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Flex 项目 */
.item {
  flex: 1;
  margin: 10px;
}

网格布局（Grid）

/* Grid 容器 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Grid 项目 */
.grid-item {
  grid-column: span 2;
}

多列布局

/* 多列布局 */
.columns {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ddd;
}

新增的视觉效果

CSS3 提供了丰富的视觉效果，无需使用图像或 JavaScript。

渐变

/* 线性渐变 */
.linear-gradient {
  background: linear-gradient(to right, #007bff, #0056b3);
}

/* 径向渐变 */
.radial-gradient {
  background: radial-gradient(circle, #007bff, #0056b3);
}

/* 重复渐变 */
.repeating-gradient {
  background: repeating-linear-gradient(
    45deg,
    #007bff,
    #007bff 10px,
    #0056b3 10px,
    #0056b3 20px
  );
}

滤镜

/* 模糊效果 */
.blur {
  filter: blur(5px);
}

/* 亮度调整 */
.brightness {
  filter: brightness(1.2);
}

/* 灰度效果 */
.grayscale {
  filter: grayscale(100%);
}

/* 对比度调整 */
.contrast {
  filter: contrast(1.5);
}

/* 组合滤镜 */
.combined {
  filter: blur(2px) brightness(1.1) contrast(1.2);
}

混合模式

/* 背景混合模式 */
.background-blend {
  background:
    linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,255,0,0.5)),
    url('image.jpg');
  background-blend-mode: multiply;
}

/* 元素混合模式 */
.element {
  mix-blend-mode: multiply;
}

遮罩和裁剪

/* 遮罩效果 */
.mask {
  mask-image: linear-gradient(to bottom, black, transparent);
}

/* 裁剪效果 */
.clip {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

新增的动画和过渡

CSS3 引入了强大的动画和过渡功能，无需 JavaScript 即可创建流畅的动画效果。

过渡

/* 基本过渡 */
.button {
  background: #007bff;
  transition: background 0.3s ease;
}

.button:hover {
  background: #0056b3;
}

/* 多属性过渡 */
.card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

动画

/* 定义动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 应用动画 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* 复杂动画 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* 多关键帧动画 */
@keyframes colorChange {
  0% {
    background: red;
  }
  33% {
    background: green;
  }
  66% {
    background: blue;
  }
  100% {
    background: red;
  }
}

.color-change {
  animation: colorChange 3s linear infinite;
}

变换

/* 2D 变换 */
.transform-2d {
  transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}

/* 3D 变换 */
.transform-3d {
  transform: perspective(500px) rotateY(45deg) rotateX(30deg);
}

/* 变换原点 */
.origin {
  transform-origin: center center;
}

实际应用示例

响应式卡片

.card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

渐变按钮

.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

动态导航

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-link {
  position: relative;
  color: #333;
  text-decoration: none;
  padding: 5px 10px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

总结

CSS3 的新特性极大地丰富了网页设计的可能性：

1. 新增选择器：更精确和灵活的元素选择
2. 新增属性：更强大的样式控制能力
3. 新增布局：Flexbox、Grid 等现代布局系统
4. 新增视觉效果：渐变、滤镜、混合模式等
5. 新增动画：过渡和动画功能，无需 JavaScript

主要优势：

• 减少依赖：许多效果不再需要 JavaScript 或图像
• 提高性能：CSS 动画比 JavaScript 动画更流畅
• 简化开发：减少了代码量和开发时间
• 增强体验：提供了更丰富的用户交互体验

掌握这些新特性，能够创建更加现代化、高性能和用户友好的网页界面。在接下来的章节中，我们将深入学习每个特性的具体用法和最佳实践。