CSS3 是层叠样式表（Cascading Style Sheets）的最新版本，它扩展了 CSS2 的功能，并引入了许多新的特性。以下是一些 CSS3 的关键特性：

  • 边框圆角：使用 border-radius 属性可以轻松地创建圆角边框。
  • 阴影效果：box-shadow 属性可以给元素添加阴影效果。
  • 渐变效果：background-image 属性支持线性渐变和径向渐变。
  • 媒体查询：@media 规则可以用来编写响应式设计。
  • 动画和过渡：使用 @keyframes 和 transition 属性可以实现动画和过渡效果。

图像示例

下面是一个使用 CSS3 创建圆角边框的例子：

<div style="border: 2px solid #000; border-radius: 15px; padding: 20px;">
  这是一个带有圆角边框的 div 元素。
</div>

CSS3 边框圆角示例

要了解更多关于 CSS3 的信息，可以访问本站的 CSS3 教程 页面。

注意：本示例中的图片可能需要根据您的网络环境进行调整。

# CSS3 进阶

在掌握了 CSS3 的基础之后，您可以开始探索更高级的功能，例如：

- **自定义字体**：使用 `@font-face` 规则可以加载和使用自定义字体。
- **多列布局**：`column-count` 和 `column-gap` 属性可以创建多列布局。
- **CSS 变量**：使用 `:root` 伪类和 `--variable` 语法可以定义和使用 CSS 变量。

## 实践示例

以下是一个使用 `@font-face` 加载自定义字体的例子：

```css
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}

body {
  font-family: 'MyFont', sans-serif;
}

CSS3 自定义字体示例

要深入了解 CSS3 的进阶知识，请参阅 CSS3 高级教程。

提示：在使用自定义字体时，请确保您拥有字体的合法使用权。