CSS3新增

CSS3 在布局、视觉效果、动画等方面增加了许多新特性。以下是一些常见的 CSS3 新增特性：

1. 选择器（Selector）：

   • 结构性伪类选择器：:nth-child(n), :first-of-type, :last-of-type, :only-child, :only-of-type, :nth-of-type(n)
   • 属性选择器：[attr], [attr=value], [attr~=value], [attr^=value], [attr$=value], [attr*=value]
   • 伪元素选择器：::before, ::after

2. 边框和背景（Border & Background）：

   • 圆角（Rounded corners）：border-radius
   • 渐变（Gradients）：线性渐变（linear-gradient）和径向渐变（radial-gradient）
   • 背景图片多背景：background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

3. 文字效果（Text Effects）：

   • 文字阴影（Text Shadow）：text-shadow
   • 字体变化（Font Face）：@font-face

4. 2D/3D转换（Transform）：

   • 2D转换：transform: translate(x, y) rotate(angle) scale(x, y)
   • 3D转换：transform: translate3d(x, y, z) rotate3d(x, y, z, angle) perspective(n)

5. 动画（Animation）：

   • @keyframes 规则：定义动画
   • animation 属性：应用动画到元素上

6. 伪类和伪元素（Pseudo-classes & Pseudo-elements）：

   • 用户界面伪类：:enabled, :disabled, :checked, :indeterminate
   • 其他伪类：:root, :empty, :target, :focus-within, :focus-visible

7. 浮动布局（Flexible Box）：

   • 弹性盒子布局：display: flex 或 display: inline-flex

8. 网格布局（Grid Layout）：

   • 网格布局：display: grid 或 display: inline-grid

9. 多列布局（Multi-column Layout）：

   • 列布局：column-count, column-gap, column-rule

示例代码：

/* 圆角 */
.box {
  border-radius: 10px;
}
 
/* 文字阴影 */
.text-shadow {
  text-shadow: 2px 2px 2px #000;
}
 
/* 渐变背景 */
.gradient-bg {
  background: linear-gradient(to right, red, yellow);
}
 
/* 键帧动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
/* 应用动画 */
.animated-box {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 弹性盒子布局 */
.flex-container {
  display: flex;
}
 
/* 网格布局 */
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}
 
/* 多列布局 */
.multi-column {
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid #000;
}

这些新特性使得网页设计师和开发者能够创建更为生动和复杂的网页布局和效果。