Frontend►CSS

009-CSS3新特性详解

CSS3 新特性全面详解

CSS3 是 CSS 规范的第三个主要版本，带来了众多强大的新特性。以下是 CSS3 核心特性的分类详解：

一、选择器增强

1. 属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 匹配具有特定属性的元素 */
[data-value] { color: blue; }

/* 精确匹配属性值 */
[type="text"] { border: 1px solid #ccc; }

/* 匹配以某值开头的属性 */
[href^="https"] { color: green; }

/* 匹配包含某值的属性 */
[class*="btn-"] { padding: 8px 12px; }

/* 匹配以某值结尾的属性 */
[src$=".png"] { border: 1px solid #eee; }

2. 结构伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 选择第一个子元素 */
li:first-child { font-weight: bold; }

/* 选择最后一个子元素 */
li:last-child { border-bottom: none; }

/* 选择第n个子元素 */
li:nth-child(3) { color: red; }

/* 奇数/偶数选择 */
tr:nth-child(odd) { background: #f5f5f5; }

/* 反向选择 */
li:nth-last-child(2) { font-style: italic; }

/* 唯一子元素 */
div:only-child { margin: 0 auto; }

3. UI状态伪类

1
2
3
4
5
6
7
/* 表单元素状态 */
input:enabled { border-color: #999; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }

/* 内容空状态 */
div:empty { display: none; }

二、盒模型增强

1. box-sizing

1
2
3
4
5
/* 传统盒模型(默认) */
div { box-sizing: content-box; } /* width = 内容宽度 */

/* 现代盒模型 */
div { box-sizing: border-box; } /* width = 内容+padding+border */

2. resize

1
2
3
4
textarea {
  resize: both; /* 允许水平和垂直调整 */
  overflow: auto; /* 必须配合overflow使用 */
}

3. outline-offset

1
2
3
4
button {
  outline: 2px dashed #3498db;
  outline-offset: 5px; /* 轮廓偏移 */
}

三、背景与边框

1. 多背景图

1
2
3
4
5
6
.hero {
  background: 
    url('bg1.png') top left no-repeat,
    url('bg2.png') bottom right no-repeat,
    linear-gradient(to bottom, #fff, #000);
}

2. background-size

1
2
3
4
5
6
7
.banner {
  background-size: cover; /* 完全覆盖容器 */
  /* 或 */
  background-size: contain; /* 完整显示图片 */
  /* 或精确控制 */
  background-size: 100px 80px;
}

3. border-radius

1
2
3
4
5
6
7
8
.btn {
  border-radius: 10px; /* 统一圆角 */
  /* 或分别设置 */
  border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 */
  
  /* 圆形 */
  border-radius: 50%;
}

4. box-shadow

1
2
3
4
5
.card {
  box-shadow: 
    2px 2px 5px rgba(0,0,0,0.3), /* X偏移 Y偏移 模糊 颜色 */
    inset 0 0 10px #000; /* 内阴影 */
}

5. border-image

1
2
3
4
div {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}

四、文本效果

1. text-shadow

1
2
3
4
5
h1 {
  text-shadow: 
    1px 1px 2px #000, /* X偏移 Y偏移 模糊 颜色 */
    -1px -1px 0 #fff; /* 多重阴影 */
}

2. @font-face

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}

body {
  font-family: 'MyFont', sans-serif;
}

3. word-wrap & text-overflow

1
2
3
4
5
6
.long-text {
  word-wrap: break-word; /* 允许长单词换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 溢出显示省略号 */
}

五、2D/3D变换

1. transform 2D

1
2
3
4
5
6
7
8
9
.element {
  transform: 
    rotate(15deg) /* 旋转 */
    scale(1.2)    /* 缩放 */
    skew(10deg)   /* 倾斜 */
    translate(20px, 10px); /* 移动 */
  
  transform-origin: left top; /* 变换原点 */
}

2. transform 3D

1
2
3
4
5
6
7
8
9
.cube {
  transform: 
    rotateX(45deg)
    rotateY(30deg)
    perspective(500px); /* 景深 */
  
  transform-style: preserve-3d; /* 保持3D空间 */
  backface-visibility: hidden; /* 隐藏背面 */
}

六、过渡与动画

1. transition

1
2
3
4
5
6
7
8
9
10
.btn {
  transition: 
    background 0.3s ease-in-out,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  background: #3498db;
  transform: scale(1.05);
}

2. animation

1
2
3
4
5
6
7
8
9
10
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
  animation: 
    bounce 1s infinite,
    fadeIn 0.5s ease-out;
}

七、Flexbox布局

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  display: flex;
  flex-direction: row; /* 主轴方向 */
  justify-content: center; /* 主轴对齐 */
  align-items: stretch; /* 交叉轴对齐 */
  flex-wrap: wrap; /* 换行 */
  gap: 20px; /* 项目间距 */
}

.item {
  flex: 1 0 200px; /* grow shrink basis */
  align-self: flex-start; /* 单个项目对齐 */
}

八、Grid布局

1
2
3
4
5
6
7
8
9
10
11
12
13
.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto 60px;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 1rem;
}

.header { grid-area: header; }
.main { grid-area: main; }

九、媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 移动优先设计 */
.container { padding: 10px; }

/* 平板 */
@media (min-width: 768px) {
  .container { padding: 20px; }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container { max-width: 1200px; }
}

/* 打印样式 */
@media print {
  nav { display: none; }
}

十、其他重要特性

1. 变量(Custom Properties)

1
2
3
4
5
6
7
8
9
:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.element {
  color: var(--primary-color);
  margin: calc(var(--spacing-unit) * 2);
}

2. 滤镜(filter)

1
2
3
4
5
6
.image {
  filter: 
    blur(2px)
    grayscale(50%)
    brightness(120%);
}

3. 混合模式(blend-mode)

1
2
3
4
.overlay {
  background: url('pattern.png'), #3498db;
  background-blend-mode: overlay;
}

4. 裁剪与蒙版

1
2
3
4
5
6
7
.clipped {
  clip-path: circle(50% at center);
  /* 或 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  
  mask-image: linear-gradient(to bottom, black, transparent);
}

十一、CSS3最佳实践

  1. 渐进增强：先构建基础样式，再添加CSS3增强
  2. 前缀处理：使用Autoprefixer自动添加厂商前缀
  3. 性能优化：避免过度使用耗性能的属性如box-shadow
  4. 回退方案：为不支持CSS3的浏览器提供替代样式
  5. 模块化组织：使用CSS预处理器管理代码

CSS3极大地扩展了CSS的能力边界，使开发者能够创建更丰富、更动态的网页体验，同时减少对JavaScript的依赖。随着浏览器支持度的不断提高，这些特性已成为现代Web开发的标准配置。