在CSS3中,你可以使用`background-image`属性来实现渐变效果。以下是一些常用的渐变类型:
线性渐变(Linear Gradient)
```css
/ 从上到下 /
background-image: linear-gradient(to bottom, red, yellow);
/ 从左到右 /
background-image: linear-gradient(to right, red, yellow);
/ 从左上到右下 /
background-image: linear-gradient(to bottom right, red, yellow);
/ 其他方向 /
background-image: linear-gradient(to top left, red, yellow);
```
径向渐变(Radial Gradient)
```css
/ 由中心向四周 /
background-image: radial-gradient(red, yellow);
/ 从中心向外,指定大小 /
background-image: radial-gradient(circle, red, yellow);
/ 通过指定形状和大小 /
background-image: radial-gradient(circle closest-side, red, yellow);
```
渐变示例
以下是一个结合线性渐变和径向渐变的示例:
```css
/ 线性渐变背景 /
.linear-gradient {
background-image: linear-gradient(to right, red, yellow);