【CSS】CSS3 新特性

CSS3 是 CSS 的最新版本，它引入了许多新特性，包括更强大的选择器、阴影、动画、变换等。以下是一些主要的 CSS3 新特性：

1. 选择器（Selectors）：

   • 属性选择器：可以根据属性来选择元素。
   • 结构伪类选择器：如 :first-child, :last-child, :nth-child() 等。
   • 伪元素：使用 ::before 和 ::after 创建内容。

2. 阴影和背景（Shadows and Backgrounds）：

   • box-shadow：为元素添加阴影。
   • border-radius：可以创建圆角。
   • background-size：可以调整背景图片的大小。

3. 动画（Animations）：

   • @keyframes：定义动画序列。
   • animation：应用动画到元素上。

4. 变换（Transitions）：

   • transform：包括旋转（rotate）、缩放（scale）、平移（translate）、倾斜（skew）等。
   • transition：应用过渡效果到属性上。

5. 媒体查询（Media Queries）：

   • 可以根据设备的屏幕大小和分辨率来应用不同的样式。

6. 字体（Fonts）：

   • @font-face：允许在网页中使用自定义字体。

7. 边框和阴影（Border and Outline）：

   • border-image：设置图片作为边框。
   • border-radius：创建圆角边框。
   • outline：设置元素的轮廓，不会影响布局。

8. 伪元素（Pseudo-elements）：

   • ::selection：可以自定义用户选中文本的样式。

9. 渐进增强（Progressive Enhancement）：

   • CSS3 中的许多特性可以用于优化现有网站，而不会破坏旧的浏览器。

示例代码：

/* 圆角边框和阴影 */
div {
  border: 1px solid #000;
  border-radius: 10px; /* 创建圆角 */
  box-shadow: 5px 5px 10px #888; /* 添加阴影 */
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 键帧动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画 */
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 媒体查询 */
@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;
}

CSS3 提供了丰富的样式和动画功能，使得网页设计师和开发者可以创建更加引人入胜的网页。