CSS3 新特性概述

CSS3 引入了许多新特性，包括选择器、盒模型、背景与边框、文字效果、2D/3D 转换、动画、多列布局等。以下是部分核心特性的分类说明：

---

选择器增强

CSS3 新增了多种选择器，提高了选择元素的灵活性和精确度。

• 属性选择器：例如 [attr^="value"]（匹配以 value 开头的属性值）。
• 伪类选择器：如 :nth-child(n)、:not(selector)。
• 伪元素选择器：如 ::before、::after（注意双冒号语法）。

---

盒模型改进

• box-sizing：支持 border-box（边框和内边距计入宽度）和 content-box（默认）。
• resize：允许用户调整元素大小（如 textarea 的扩展）。

---

背景与边框

• 多背景图：通过逗号分隔设置多个背景。

  background: url(image1.png) top left no-repeat, 
              url(image2.png) bottom right no-repeat;
  

• 圆角边框：border-radius 支持百分比或固定值。
• 阴影效果：box-shadow（盒子阴影）和 text-shadow（文字阴影）。
• 边框图片：border-image 允许用图片作为边框。

---

渐变与透明度

• 线性渐变：linear-gradient(direction, color-stop1, color-stop2)。
• 径向渐变：radial-gradient(shape, color-stop1, color-stop2)。
• 透明度：rgba() 和 hsla() 支持颜色透明度。

---

文字效果

• text-overflow：控制文本溢出时的显示（如 ellipsis 显示省略号）。
• word-wrap：允许长单词换行（break-word）。
• @font-face：引入自定义字体。

---

2D/3D 转换

• 2D 变换：transform 支持平移（translate）、旋转（rotate）、缩放（scale）等。
• 3D 变换：新增 rotateX、rotateY 和 perspective 属性。
• 过渡效果：transition 实现属性变化的平滑动画。

---

动画

• @keyframes：定义关键帧动画。

  @keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
  }
  

• animation：控制动画播放（如 name、duration、timing-function）。

---

多列布局

• column-count：将内容分为指定列数。
• column-gap：设置列间距。
• column-rule：添加列间分隔线。

---

弹性盒子（Flexbox）

• 容器属性：如 display: flex、flex-direction、justify-content。
• 子项属性：如 flex-grow、flex-shrink、align-self。

---

网格布局（Grid）

• display: grid：定义网格容器。
• grid-template-columns：设置列数和宽度。
• grid-gap：控制网格间距。

---

媒体查询

• 响应式设计：根据设备特性（如屏幕宽度）应用不同样式。

  @media (max-width: 768px) {
    body { font-size: 14px; }
  }
  

---

其他特性

• calc()：动态计算长度（如 width: calc(100% - 20px)）。
• filter：应用视觉效果（如模糊、亮度调整）。
• will-change：提示浏览器优化即将变化的属性。

---

CSS3 新特性表格整理

类别	特性	描述
选择器	:nth-child(n)	匹配父元素的第 n 个子元素。
	:not(selector)	排除匹配指定选择器的元素。
	::before / ::after	在元素内容前/后插入生成内容。
盒模型	box-shadow	为元素添加阴影效果（水平偏移、垂直偏移、模糊半径、颜色等）。
	border-radius	设置圆角边框（支持百分比和固定值）。
背景与边框	background-size	控制背景图片尺寸（如 cover、contain）。
	multiple backgrounds	允许元素设置多个背景图。
	border-image	使用图片作为边框。
渐变	linear-gradient()	创建线性渐变背景。
	radial-gradient()	创建径向渐变背景。
文本效果	text-shadow	为文本添加阴影（类似 box-shadow）。
	word-wrap	允许长单词换行（如 break-word）。
	@font-face	引入自定义字体。
变形与动画	transform	支持旋转（rotate）、缩放（scale）、倾斜（skew）等 2D/3D 变换。
	transition	定义属性变化的过渡效果（如 all 0.3s ease）。
	animation + @keyframes	创建复杂动画（需定义关键帧）。
布局	flexbox	弹性布局模型（display: flex）。
	grid	网格布局模型（display: grid）。
	column-count	实现多列文本布局。
媒体查询	@media	根据设备特性（如屏幕宽度）应用不同样式。
其他	calc()	在 CSS 中执行动态计算（如 width: calc(100% - 20px)）。
	var()	使用 CSS 自定义变量（如 --main-color: #ff0000）。

注意事项

• 浏览器兼容性：部分特性需加厂商前缀（如 -webkit-）。
• 性能影响：复杂动画或渐变可能影响渲染性能。