【CSS3】重点知识内容，快速上手

在CSS3中，有许多重要的新特性，包括选择器、盒模型、背景和边框、文字效果、2D/3D转换、动画、多列布局等。以下是一些关键点和示例代码：

1. 选择器：

   • 属性选择器（例如，[type="text"]匹配所有type属性为text的元素）
   • 结构性伪类选择器（例如，:nth-child(2)匹配其父元素的第二个子元素）

2. 盒模型：

   • box-sizing属性（border-box使元素的宽高包含边框和内边距）

3. 背景和边框：

   • 圆角（border-radius）
   • 阴影（box-shadow）
   • 渐变（线性linear-gradient和径向radial-gradient）

4. 文字效果：

   • 文字阴影（text-shadow）
   • 字体变化（font-variant）

5. 2D/3D转换：

   • 转换（transform，包括translate, rotate, scale, skew）

6. 动画：

   • @keyframes规则（定义动画序列）
   • animation属性（应用动画到元素上）

7. 多列布局：

   • column-count和column-gap控制列数和间隙

示例代码：

/* 圆角边框 */
div {
  border: 1px solid #000;
  border-radius: 10px;
}
 
/* 文字阴影 */
h1 {
  text-shadow: 2px 2px 2px #000;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* CSS动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 多列布局 */
article {
  column-count: 3;
  column-gap: 20px;
}

CSS3提供了丰富的样式和动画功能，使得网页设计师和开发者能创建更加引人入胜的网页。上述代码是CSS3的一些简单应用，可以作为学习和入门的示例。