如果你想要画出一个苹果肯定需要给他加上颜色了，就用到了以下的知识，和以前所学有一点点不同的是，这次用的是一个新的属性RGBA

RGBA： RGB的基础上多了控制alpha透明度的参数。 R、G、B三个参数，正整数值的取值范围为： 0 - 255 百分数值取值范围为：0.0% - 100.0%。 A参数，取值在0~1之间，不可为负值。

如果说rgba是制作透明色（透明背景色、透明边框色、透明前景色等），有的人可能会说这不和opacity差不多嘛。opacity制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就只能在边上站着了，有心无力呀

效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是opacity后代元素会随着一起具有透明性，所以我们Opacity中的字随着透明值下降越来越看不清楚，而RGBA不具有这样的问题。

从我们上面的实例中我们也知道，RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。

在RGBA还没有出世前，如何解决其后代元素会受其影响这个问题的呢？为了解决这样的问题我们需要增加一个空的div来专门放置使用透明的背景，然后通过使用绝对定位来实现我们需要的结果。

代码和上面的差不多，在这里我就偷个懒不写了。

ok，RGBA就说到这里，想做一张立体的苹果，单单有颜色肯定是不够的，还需要渐变。

需要加一些额外的参数

首先是阴影渐变的位置形状 ：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”： circle：如果和大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变 ellipse：如果和大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

可以用百分数来确定圆心的位置

还有阴影渐变在何处停止 ：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有： closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边； closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角； farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边； farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

准备工作差不多了，该开始画苹果了

首先把苹果拆分成几个部分

然后在body里面建几个相应的DIV（在这里我就用c1，c2简单命名了，实在不知道取什么名字了）

d4是背景 c1是整个苹果和阴影1 2 c2是苹果坑里面3个阴影 c3是投影

整体的框架有了，然后就该开始写里面的CSS了

这里要注意z-index的层叠顺序，定位子元素要用相对定位，否则你想把窗口小一点的话，里面的投影啊之类的就会跑偏的

想做出立体的效果用一个渐变是不够的，多用几个层叠在一起，效果更好哦！