CSS3 新增的新特性

CSS3 是 CSS 的最新版本，它引入了许多新特性，以下是一些常见的 CSS3 新增特性：

1. 边框（Borders）

   • 圆角边框（border-radius）
   • 阴影效果（box-shadow）

2. 背景和图像

   • 渐进背景颜色（linear-gradient）
   • 背景图片尺寸（background-size）
   • 背景图片定位（background-origin）
   • 多背景图（background-image 的多背景图链接）

3. 文字效果

   • 文字阴影（text-shadow）
   • 字体（@font-face 规则）

4. 2D/3D转换

   • 转换（transform）
   • 旋转（rotate）
   • 缩放（scale）
   • 移动（translate）
   • 倾斜（skew）

5. 动画

   • @keyframes 规则创建动画
   • animation 属性应用动画

6. 多列布局

   • column-count 设置列数
   • column-gap 设置列间隙

7. 用户界面

   • 滚动条样式（scrollbar-face-color, scrollbar-track-color 等）
   • 圆角（border-radius）
   • 渐进边框效果（border-image）

8. 多媒体

   • 视频和音频（<video> 和 <audio> 标签）

9. 框模型

   • box-sizing 指定如何计算元素的总宽度和总高度

10. 过滤器

    • 亮度（brightness）
    • 对比度（contrast）
    • 灰度（grayscale）
    • sepia（sepia）
    • 模糊（blur）

下面是一个简单的 CSS3 示例，使用了几个新特性：

/* 圆角边框和阴影效果 */
div {
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #888888;
}
 
/* 渐进背景颜色 */
div {
  background-image: linear-gradient(to right, red, yellow);
}
 
/* 文字阴影 */
p {
  text-shadow: 2px 2px 2px #888888;
}
 
/* 媒体查询，根据屏幕大小应用不同样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
 
/* 自定义字体 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff') format('woff');
}
 
body {
  font-family: 'MyCustomFont', sans-serif;
}
 
/* CSS动画 */
@keyframes myAnimation {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: myAnimation;
  animation-duration: 4s;
}

这些新特性使得网页设计师和开发者能创建更加生动和复杂的网页界面，提升用户体验。