|
文件来源：http://www.cnblogs.com/PeunZhang/archive/2013/02/17/2883395.html 本文以移动开发中遇到的一个径向渐变例子，讲解CSS3径向渐变在项目中的应用和以及需要注意的地方。 一、径向渐变的基础知识 径向渐变的概念：从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）。 二、径向渐变的基本语法 background-image:-webkit-gradient(type,x1 y1,r1,x2 y2,r2,from(开始颜色值),to(结束颜色值),color-stop(偏移量小数,停靠颜色值),... );第一组参数type（类型）为 radial，因为是径向渐变； 第二组参数x1 y1,r1为第一个圆的圆心和半径； 第三组参数x2 y2,r2为第二个圆的圆心和半径； 第四组参数color-stop为渐变的中间过渡色，可以设置多组。 二、CSS3径向渐变在ios和android系统的兼容测试
android2.x特别是2.1等较低的版本，并不完全支持，渲染出来的效果不丰富 二、CSS3径向渐变最简单的写法 CSS3径向渐变（radial）的代码 .bg{ background:-webkit-gradient(radial,50% 50%,0,50% 50%,100,from(green),to(white)); } 代码解释如下，可以看出径向渐变是2个圆组成，2个圆可分别设置不同的圆心和半径，这里的圆心都为(50%,50%)，第一个50%是圆心距离X轴的距离，第二个50%是圆心距离Y轴的距离， 而第一个圆的半径为0，第二个圆的渐变半径为100。
运行代码后视觉效果如下图，可以看出以白色(white)结束后，白色填充了整个背景 大部分设计稿是一个颜色到另一个颜色的渐变，所以我们一般可以设置第一个圆渐变是起点，半径为0，第二个圆的渐变结束点，开始设置半径，这是最简单的做法啦！然后也可能运到更多复杂的效果，这个需要你对CSS3渐变有深入的理解和使用 三、CSS3径向渐变的中间过渡色color-stop color-stop到底是怎么使用的呢，看下来自Photoshop渐变编辑器的图片:
为了明显的看到效果，代码中从绿色到紫色的径向渐变，50%处中间过渡色为红色，80%处为黄色 .bg{ background:-webkit-gradient(radial,50% 50%,0, 50% 50%,100,from(green), to(purple),color-stop(50%,red),color-stop(80%,yellow)); } 运行代码后视觉效果如下图：
四、CSS3径向渐变实战 设计稿给过来的背景图，2层的线性渐变叠加，要如何实现呢？
上图，我们来分析下， 最顶层（图层8）为黄色渐变到透明，在半径在40到180之间由70%的透明度渐变到0%，也就是渐变完全透明。 -webkit-gradient(radial,50% 50%,40,50% 50%,180,from(rgba(249,161,22,0.7)),to(rgba(249,161,22,0)));中间一层（图层7）为橙色渐变到透明，在半径在80到250之间由100%的透明度渐变到0% -webkit-gradient(radial,50% 50%,80,50% 50%,250,from(rgba(249,109,22,1)),to(rgba(249,109,22,0)));红色底（图层4） background-color:#EE1D25;小技巧：通常情况下CSS属性值中，后出现的属性值会覆盖前面的属性，而-webkit-gradient中多层背景渐变是放在同一个属性值时，先出现的值至于最顶层，从上到下的顺序展示，像多个div使用z-index的后有层级高低的表现，由此我们把上面的代码合并如下： .bg{ background-image:-webkit-gradient(radial,50% 50%,40,50% 50%,180,from(rgba(249,161,22,0.7)),to(rgba(249,161,22,0))), -webkit-gradient(radial,50% 50%,80,50% 50%,250,from(rgba(249,109,22,1)),to(rgba(249,109,22,0))); background-color:#EE1D25; } ok！搞定~ |
|
|
