纯CSS3网页背景渐变颜色（background）两种实现方法和技巧

现如今站长们制作网站不再是天花乱坠版的页面，而是简单“丝滑”，清晰有趣为主，特别是h5+css3的出世，更让站长喜欢了响应式的布局以及清新淡雅的页面风格，本期介绍关于css3背景渐变的小技巧方法~

站长们何为网页渐变？

通过CSS3代码为HTML元素设置渐变背景，让元素背景呈现出平滑过渡的颜色效果。这种渐变效果更美观简单，无需使用背景图片！

CSS实现渐变的优点主要有两点：

一是由于它是通过CSS代码来实现的，因此，这种方法能够减少图片的使用，从而减小网站的加载时间，优化页面性能；

二是它提供了很多琳琅满目的选项和组合，使得设计师能够创建出丰富多彩、独特而富有创意的背景。

下面分享两种实现渐变的技巧和方法：

background-image方法：(linear-gradient)

background-image: linear-gradient(to bottom, #ff7f00, #ff5500, #f21600);

background方法：(radial-gradient)

background: radial-gradient(at top left, rgba(0,0,0,0) 30%, #ff5500 70%);

两种方法的区别：

• linear-gradient() ==》路径渐变
• radial-gradient() ==》经向渐变
• repeating-linear-gradient()==》 重复路径渐变
• repeating-radial-gradient()==》 重复径向渐变

语法：linear-gradient(渐变角度，起始颜色 起始渐变位置，结束颜色 结束渐变的位置)；

CSS3-Background渐变是一个非常有用的技术，它可以让我们创造出更具视觉冲击力的背景效果。

现在的网站页面中比较常见，如果你遇到了不妨试着学习和研究吧！