CSS3中提供了两种渐变效果：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。通过使用CSS渐变，我们可以实现从一个颜色向另一个颜色过渡的视觉效果，并且这些效果是不需要图像文件支持的。
线性渐变允许我们创建从一个方向平滑过渡到另一个方向的颜色效果，而径向渐变则是从一个中心点向外部的圆形区域进行颜色过渡。这两种渐变的使用，可以让网页设计更加美观和有层次感。
一、线性渐变：
在IE6以下的浏览器版本中，线性渐变是不兼容的。但在现代浏览器中，线性渐变已经得到了广泛的支持。示例代码中显示了如何创建一个从蓝色（#1FA9F4）到深蓝色（#001C4E）的垂直线性渐变效果：
```css
.linear {
background-color: #1FA9F4; /* 旧浏览器兼容 */
background-image: -moz-linear-gradient(top, #1FA9F4 0%, #001C4E 100%); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1FA9F4), color-stop(100%,#001C4E)); /* Chrome,Safari4+ */
background-image: -o-linear-gradient(top, #1FA9F4 0%, #001C4E 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #1FA9F4 0%, #001C4E 100%); /* IE10+ */
background-image: linear-gradient(to bottom, #1FA9F4 0%, #001C4E 100%); /* 标准语法 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1FA9F4', endColorstr='#001C4E', GradientType=0); /* IE6-9 */
}
```
在CSS代码中，我们定义了-linear-gradient属性的多种浏览器前缀写法，确保了在不同浏览器中的兼容性。IE浏览器使用filter属性来模拟线性渐变效果。
二、径向渐变：
径向渐变则创建的是从一个中心点开始向外扩散的渐变效果。示例代码中展示了一个中心点在上方45度位置的径向渐变，从蓝色（#1FA9F4）过渡到深蓝色（#001C4E）：
```css
.circle {
background-color: #1FA9F4; /* 其他浏览器兼容 */
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #1FA9F4 0%, #001C4E 100%); /* Firefox */
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 50%, 90, from(#1FA9F4), to(#001C4E)); /* Chrome,Safari4+ */
}
```
与线性渐变类似，径向渐变也需要使用不同的前缀来适应不同的浏览器。在这些代码中，使用了-radial-gradient属性来定义径向渐变效果，而Webkit核心浏览器使用了-webkit-gradient属性。
总结：
CSS3的线性渐变和径向渐变提供了强大且灵活的视觉效果，可以用来美化网页背景或界面元素。由于不同的浏览器对CSS3渐变的支持情况不一，因此需要使用浏览器特定的前缀来确保跨浏览器的兼容性。当然，随着浏览器对标准CSS3规范的支持越来越好，未来可能会减少对这些前缀的依赖。对于开发者来说，了解并能够使用这些技术，能够显著提升网页设计的质量和用户交互体验。
