CSS3主要新增特性

CSS3 引入了许多新特性，极大地增强了网页的样式表现力和交互性。以下是一些主要的 CSS3 新增特性：

1. 选择器：

   • 属性选择器（如 [attr^=value]、[attr$=value]、[attr*=value]）
   • 伪类选择器（如 :nth-child()、:nth-last-child()、:not()、:last-child、:only-child）
   • 伪元素选择器（如 ::before、::after、::first-letter、::first-line）

2. 盒模型：

   • box-sizing 属性（如 border-box、content-box）
   • box-shadow 属性（用于添加阴影效果）

3. 背景与边框：

   • background-size（控制背景图片大小）
   • background-origin（控制背景图片的定位区域）
   • background-clip（控制背景图片的裁剪区域）
   • 多背景图片（background-image 支持多个背景图片）
   • border-radius（用于创建圆角边框）
   • border-image（使用图片作为边框）

4. 渐变：

   • 线性渐变（linear-gradient）
   • 径向渐变（radial-gradient）

5. 文本效果：

   • text-shadow（为文本添加阴影）
   • word-wrap（控制长单词或 URL 的换行）
   • text-overflow（控制文本溢出时的显示方式）

6. 2D/3D 转换：

   • transform（如 rotate、scale、translate、skew）
   • transform-origin（设置变换的原点）
   • perspective（设置 3D 透视效果）
   • transform-style（控制子元素是否保留 3D 空间）

7. 过渡与动画：

   • transition（用于创建平滑的过渡效果）
   • @keyframes 和 animation（用于创建复杂的动画）

8. 多列布局：

   • column-count（设置列数）
   • column-gap（设置列间距）
   • column-rule（设置列之间的分隔线）

9. 弹性盒子布局（Flexbox）：

   • display: flex（启用弹性盒子布局）
   • flex-direction（设置主轴方向）
   • justify-content（设置主轴对齐方式）
   • align-items（设置交叉轴对齐方式）
   • flex-wrap（控制是否换行）

10. 网格布局（Grid）：

    • display: grid（启用网格布局）
    • grid-template-columns 和 grid-template-rows（定义网格列和行）
    • grid-gap（设置网格间距）
    • grid-area（定义网格区域）

11. 媒体查询：

    • @media（用于响应式设计，根据设备特性应用不同的样式）

12. 自定义字体：

    • @font-face（允许使用自定义字体）

13. 颜色与透明度：

    • rgba() 和 hsla()（支持透明度）
    • opacity（设置元素透明度）

14. 用户界面：

    • resize（允许用户调整元素大小）
    • outline-offset（设置轮廓与边框的偏移量）

这些特性使得开发者能够创建更加丰富、动态和响应式的网页设计，提升了用户体验和页面的视觉效果。