如何实现CSS渐变效果？

现在做颜色渐变，早就不用切图片背景了。CSS3内置的渐变函数非常强大，直接写在样式里，既灵活又省去HTTP请求。主要就两种：线性渐变和径向渐变，够你应对绝大多数设计了。

线性渐变用得最多，语法很直观。你只需要定义个方向和一串颜色，浏览器就能帮你平滑地渲染出来。方向可以用to right、to bottom这样的关键字，也可以用45deg这样的角度。

background: linear-gradient(to right, #ff7e5f, #feb47b);

这段代码创建了一个从左到右，从橙红色到淡橙色的水平渐变。你还可以添加更多颜色断点，做出更复杂的效果。

background: linear-gradient(45deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

在HTML5的现代Web项目中，这种纯CSS实现的渐变背景，是制作醒目按钮或区域背景的常用技巧。

径向渐变则是从中心点向外发散的圆形或椭圆形渐变。它很适合用来创建一些聚光灯、光晕之类的视觉效果。

background: radial-gradient(circle at center, #f6d365, #fda085);

circle at center指定了形状是圆形，中心点在元素正中。你也可以控制它的大小和位置。

实际使用时，记得考虑一下浏览器兼容性。虽然现代浏览器支持都很好，但对于一些老旧的浏览器，可以先用一个纯色作为回退方案。渐变是个很棒的视觉工具，用得好能极大提升界面的质感，而且修改起来比图片方便太多了。