接着之前的[css]我要用css画幅画(八) - Hello Kitty，这次画的是苹果公司的logo
这次打算将分析和实现步骤尽量详细的说一说。
其实之前的也打算详细讲分析和设计过程，不过之前的图比较复杂，如果讲那么细，真是怕要讲到猴年马月。
这次的图足够简单，就拿这个图来说明。
都是一些简单的基本方法，通过举一反三，可以实现大部分效果。
Github Demo：http://bee0060.github.io/Css-Paint/pages/logo/apple.html
Code Pen Demo: http://codepen.io/bee0060/pen/QNBVLE
代码：https://github.com/bee0060/Css-Paint
原图如下：
我实现这个图的方法，跟以前一样，也是将其拆分成多个易实现的简单形状。
虽然这个图并不复杂，不过我也是尝试过几种方法后，才最终定下解决方案。
我下面要说的解决方案就是关于如何拆分原图的。
我是这么拆的：
1. 显而易见的，先将叶子拆除去单独实现。 叶子也是最容易实现得，代码如下：
1 <div class="apple-leaf pos-a m-hoz-auto bacc-white"></div>
html
1 .apple-leaf {
2 border-top-left-radius: 100%;
3 border-bottom-right-radius: 100%;
4 height: 55px;
5 left: 49%;
6 top: -43px;
7 width: 45px;
8 z-index: 6;
9 }
css
2. 将苹果拆成上中下三个部分，如下图红线所示：
3. 先实现中间部分，暂称为“苹果身”， 实现过程如下：
3.1 还没被咬的苹果
苹果身是用一个不规则圆形，放在一个稍小的容器中，让圆的顶部和底部都超出容器， 容器设置overflow:hidden;
让顶部和底部超出容器，是为了让之后和苹果的上下部分的圆边更容易协调的衔接起来。 如下所示：
有点丑，但是不要在意细节。 在实际的图中，都是没有边框的，这里的边框只是为了表示容器和不规则圆的形状和位置。
其中红色边框表示容器， 黑色边框表示不规则圆。
上述图形的代码为：
1 <div class="apple-body border-red-2"> 2 <div class="apple-body-inside border-black-2"></div> 3 </div>
html
1 .border-black-2 {
2 border: 2px solid black;
3 }
4
5
6 .border-red-2 {
7 border: 2px solid red;
8 }
9
10 .apple-body {
11 height: 150px;
12 width: 200px;
13 z-index: 3;
14 }
15
16 .apple-body-inside {
17 border-top-left-radius: 60px 70px;
18 border-top-right-radius: 60px 70px;
19 border-bottom-left-radius: 100px 115px;
20 border-bottom-right-radius: 100px 115px;
21 height: 175px;
22 margin-top: -5px;
23 width: 200px;
24 z-index: 3;
25 }
css
很明显，apple-body就是容器类， apple-body-inside是里面的不规则圆。
在给圆上色（设置黑色背景色）并给容器设置overflow:hidden后， 就成了以下这个样子：
对应的主要代码没变，因为上色和overflow的属性我已经抽取到common.css中，只要添加相应的类即可。如下：
1 <div class="apple-body bacc-black oh border-black-2"> 2 <div class="apple-body-inside bacc-white"></div> 3 </div>
html
1 .oh {
2 overflow: hidden;
3 }
4 .bacc-white {
5 background-color: white;
6 }
7
8 .bacc-black {
9 background-color: black;
10 }
11 .apple-body {
12 height: 150px;
13 width: 200px;
14 z-index: 3;
15 }
16
17 .apple-body-inside {
18 border-top-left-radius: 60px 70px;
19 border-top-right-radius: 60px 70px;
20 border-bottom-left-radius: 100px 115px;
21 border-bottom-right-radius: 100px 115px;
22 height: 175px;
23 margin-top: -5px;
24 width: 200px;
25 z-index: 3;
26 }
css
3.2 被咬了后
这个效果是用一个黑色圆形来遮盖实现的。 只需要调整一下圆的大小和位置即可。 效果和代码如下：
1 <div class="apple-ate pos-a pull-left bacc-black"></div>
html
1 .apple-ate {
2 border-radius: 50%;
3 height: 95px;
4 margin-left: 160px;
5 margin-top: 8px;
6 width: 95px;
7 }
css
4.苹果的上部分，暂称为“苹果上身”，实现过程如下：
可以看到，苹果上身是波浪形的圆弧， 为了实现，我将波浪形切割成3个部分，每个部分暂称为圆弧，朝向分别是上下上，背景色分别是白黑白。然后将其连接起来，调整位置和圆角弧度（border-radius）的值来使其尽量协调。
其中每个圆边都是用和苹果身类似的技巧， 用一个overflow：hidden的小容器，包含一个较大的圆，并只显示其中所需的部分，形成圆弧。 且左右两个圆弧只是位置不同（margin-left），其他属性相同。
切割图如下：
这里继续用红线表示切割（大家不会想歪）。
这里的策略是两个向上的白色圆弧分布两边，一个向下的黑色圆弧进行适当遮盖，以形成波浪。
4.1 向上的圆弧形状如下：
和苹果身一样， 红框表示容器，黑框表示圆，只有红框内的部分才会被显示，上色后效果和代码如下：
1 <div class="apple-body-top-left oh pos-r pull-left bacc-black"> 2 <div class="apple-body-top-left-inside bacc-white"></div> 3 </div>
html
1 .apple-body-top-left {
2 height: 15px;
3 width: 65px;
4 z-index: 4;
5 }
6
7 .apple-body-top-left-inside {
8 border-radius: 50%;
9 height: 75px;
10 margin-top: 8px;
11 margin-left: -17px;
12 width: 82px;
13 }
css
另一个向上圆弧只是margin-left属性不同，就不再敖述了。
4.2 向下的圆弧的形状如下：
红框黑框就不再敖述了， 这里需要注意的是，由于要用向下黑色圆弧遮盖向上的白色圆弧，所以在html中，我是把向下圆弧放在最后，这样z-index一样就可以实现遮盖，这样不用管理多一个z-index的值，让复杂度不至于增加。尽量keep it simple.
上色后效果和代码如下：
1 <div class="apple-body-top-center pos-a pull-left oh bacc-white"> 2 <div class="apple-body-top-center-inside bacc-black"></div> 3 </div>
html
1 .apple-body-top-center {
2 height: 15px;
3 left: 20px;
4 top: 4px;
5 width: 85px;
6 z-index: 5;
7 }
8
9 .apple-body-top-center-inside {
10 border-radius: 50%;
11 height: 95px;
12 margin-left: 1px;
13 margin-top: -80px;
14 width: 87px;
15 z-index: 5;
16 }
css
5. 最后只剩下“苹果下身”了， 技巧和苹果上身相同，只是一些宽高、位置属性不同，在这里就也是不再敖述了。
6. 画完了， 最终效果就不用截图了，请直接点下面的demo链接看吧。
完整代码如下：
1 <div class="apple-container pos-r m-hoz-auto"> 2 <div class="apple-leaf pos-a m-hoz-auto bacc-white"></div> 3 <div class="apple-body-top pos-r m-hoz-auto"> 4 <div class="apple-body-top-left oh pos-r pull-left"> 5 <div class="apple-body-top-left-inside bacc-white"></div> 6 </div> 7 <div class="apple-body-top-right oh pos-r pull-left"> 8 <div class="apple-body-top-right-inside bacc-white"></div> 9 </div> 10 <div class="apple-body-top-center oh pos-a pull-left"> 11 <div class="apple-body-top-center-inside bacc-black"></div> 12 </div> 13 </div> 14 <div class="apple-body pos-r oh m-hoz-auto"> 15 <div class="apple-body-inside pull-left bacc-white"></div> 16 <div class="apple-ate pos-a pull-left bacc-black"></div> 17 </div> 18 <div class="apple-body-bottom pos-r m-hoz-auto"> 19 <div class="apple-body-bottom-left oh pos-r pull-left"> 20 <div class="apple-body-bottom-left-inside bacc-white"></div> 21 </div> 22 <div class="apple-body-bottom-right oh pos-r pull-left"> 23 <div class="apple-body-bottom-right-inside bacc-white"></div> 24 </div> 25 <div class="apple-body-bottom-center oh pos-a pull-left"> 26 <div class="apple-body-bottom-center-inside bacc-black"></div> 27 </div> 28 </div> 29 </div>
html
1 .apple-container {
2 height: 600px;
3 margin-top: 100px;
4 margin-bottom: 100px;
5 width: 600px;
6 }
7
8 .apple-leaf {
9 border-top-left-radius: 100%;
10 border-bottom-right-radius: 100%;
11 height: 55px;
12 left: 49%;
13 top: -43px;
14 width: 45px;
15 z-index: 6;
16 }
17
18 .apple-body-top {
19 height: 15px;
20 width: 130px;
21 }
22
23 .apple-body-top-left {
24 height: 15px;
25 width: 65px;
26 z-index: 4;
27 }
28
29 .apple-body-top-left-inside {
30 border-radius: 50%;
31 height: 75px;
32 margin-top: 8px;
33 margin-left: -17px;
34 width: 82px;
35 }
36
37 .apple-body-top-right {
38 height: 15px;
39 width: 65px;
40 z-index: 4;
41 }
42
43 .apple-body-top-right-inside {
44 border-radius: 50%;
45 height: 75px;
46 margin-top: 8px;
47 margin-left: 1px;
48 width: 82px;
49 }
50
51 .apple-body-top-center {
52 height: 15px;
53 left: 20px;
54 top: 4px;
55 width: 85px;
56 z-index: 5;
57 }
58
59 .apple-body-top-center-inside {
60 border-radius: 50%;
61 height: 95px;
62 margin-left: 1px;
63 margin-top: -80px;
64 width: 87px;
65 z-index: 5;
66 }
67
68 .apple-body {
69 height: 150px;
70 width: 200px;
71 z-index: 3;
72 }
73
74 .apple-body-inside {
75 border-top-left-radius: 60px 70px;
76 border-top-right-radius: 60px 70px;
77 border-bottom-left-radius: 100px 115px;
78 border-bottom-right-radius: 100px 115px;
79 height: 175px;
80 margin-top: -5px;
81 width: 200px;
82 z-index: 3;
83 }
84
85 .apple-ate {
86 border-radius: 50%;
87 height: 95px;
88 margin-left: 160px;
89 margin-top: 8px;
90 width: 95px;
91 }
92
93 .apple-body-bottom {
94 height: 15px;
95 width: 130px;
96 }
97
98 .apple-body-bottom-left {
99 height: 15px;
100 width: 65px;
101 z-index: 4;
102 }
103
104 .apple-body-bottom-left-inside {
105 border-radius: 50%;
106 height: 75px;
107 margin-top: -66px;
108 margin-left: -7px;
109 width: 70px;
110 }
111
112 .apple-body-bottom-right {
113 height: 15px;
114 width: 65px;
115 z-index: 4;
116 }
117
118 .apple-body-bottom-right-inside {
119 border-radius: 50%;
120 height: 75px;
121 margin-top: -66px;
122 margin-left: 2px;
123 width: 70px;
124 }
125
126 .apple-body-bottom-center {
127 height: 15px;
128 left: 28px;
129 top: -3px;
130 width: 70px;
131 z-index: 5;
132 }
133
134 .apple-body-bottom-center-inside {
135 border-radius: 50%;
136 height: 95px;
137 margin-left: -6px;
138 width: 87px;
139 }
css
Github Demo：http://bee0060.github.io/Css-Paint/pages/logo/apple.html
Code Pen Demo: http://codepen.io/bee0060/pen/QNBVLE
代码：https://github.com/bee0060/Css-Paint
以上技巧都很简单且基础，不过通过灵活运用也可以实现很多圆弧类的效果，如之前的两幅画都是大量用到这些技巧。
如发现什么错漏，欢迎指出； 如果有什么想法，也非常欢迎交流。
谢谢观看。
转载请注明出处：[css]我要用css画幅画(九) - Apple Logo