CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。接下来奉上几张图片来一睹CSS3 渐变的魔法吧~
2024年10月31日
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。接下来奉上几张图片来一睹CSS3 渐变的魔法吧~
2024年10月31日
语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
2024年10月31日
2024年10月31日
好程序员web前端教程之CSS3渐变，CSS3渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
1、线性渐变
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
2024年10月31日
语法：linear-gradient(方向,颜色 位置,颜色 位置);
示例： background: linear-gradient(90deg,red 40%,yellow 50%,green 80%);
参数解析： 其中位置的百分比指的是颜色结束渐变的面积。
方向取值：top，bottom left等／0deg
（如果不写方向默认为180deg／top），方向前面不要加to。2024年10月31日
如下图所示，在网页设计中，有时候会需要用到渐变效果，渐变可以创建出类似于彩虹的视觉图案效果，在没有CSS3之前，为了显示一个渐变需要专门制作一个图片，这种不法不但不灵活还增加请求数，而CSS3可以轻松实现网页渐变效果，用于做渐变背景、渐变导航、配合CSS3动画做特效等。在CSS3中，Gradient（渐变）分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同，但最后是统一标准的：
2024年10月31日
在项目中，有很多地方都用到了背景线性渐变。
如果在移动端还可以适当使用CSS3这个属性
比如：黑色渐变到白色，代码如下：
.gradient{
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
2024年10月31日
线性渐变:
CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下
background: linear-gradient(direction, color-stop1, color-stop2, ...);
linear-gradient(渐变方向,色彩1,位置1,色彩2,位置2...)
2024年10月31日
上午制作网页时，写了一个利用 CSS3 实现网页背景颜色渐变的效果，晚上整理代理时，发现这效果还挺好玩的。记录下来，以后再写这种网页背景颜色渐变的效果时，只能复制就行了。
网页背景颜色的渐变，利用了 CSS3 中的 Gradients 属性，下面飞鸟慕鱼就来详细的说一说哦。
CSS3 的渐变效果有两种，分别为：Linear Gradients(线性渐变) 和 Radial Gradients(径向渐变)。