用简单的CSS画出一个好吃的苹果

作者: 元迟1 | 来源:发表于2016-11-07 12:30 被阅读250次

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

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

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

RGBA与opacity.png

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

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

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

![2.png](http:https://img.haomeiwen.com/i3133107/5115f019cc47e5d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

rgba2.png

rgba3.png

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

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

需要加一些额外的参数

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

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

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