[CSS]CSS3 背景

CSS3 背景（Backgrounds and Borders）是一个强大的模块，它提供了许多新的方法来处理背景图片、颜色以及多背景图层。

1. 使用线性渐变创建背景:

div {
  background: linear-gradient(to right, red , yellow);
}

2. 使用径向渐变创建背景:

div {
  background: radial-gradient(circle, red, yellow, green);
}

3. 使用多背景图层:

div {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: left top, right bottom;
}

4. 背景尺寸设置:

div {
  background-size: cover; /* 背景图片覆盖整个容器 */
}

5. 背景重复设置:

div {
  background-repeat: no-repeat; /* 背景图片不重复 */
}

6. 背景定位设置:

div {
  background-position: center center; /* 背景图片居中 */
}

7. 圆角背景:

div {
  background: #ffcc00; /* 背景颜色 */
  border-radius: 10px; /* 圆角半径 */
}

8. 边框图片:

div {
  border-image-source: url('border.png'); /* 边框图片 */
  border-image-slice: 30; /* 图片边界向内偏移 */
  border-image-width: 2px; /* 边框图片的宽度 */
  border-image-outset: 5px; /* 边框图片向外偏移 */
  border-image-repeat: stretch; /* 图片如何填充边界区域 */
}

以上是CSS3背景的一些基本用法，CSS3背景功能强大，可以创建出各种各样的视觉效果。