武林網(www.49028c.com)文章簡介：用CSS3繪制小新.
新浪有兩個吉祥物，小新是女孩兒，小浪是男孩兒。現在流行用
這次使用到的CSS3屬性包括：
圓角：-moz-border-radius; -webkit-border-radius;
旋轉：-moz-transform; -webkit-transform;
陰影：-moz-box-shadow; -webkit-box-shadow;
漸變：-moz-linear-gradient; -webkit-gradient;
下面就看一下我用CSS3代碼畫的小新，在各瀏覽器下的表現：
Firefox 3.6.8
Chrome 5.0
Safari 5.0
IE6、IE7、IE8
實現邏輯很簡單。先畫一個長方塊兒，用CSS3代碼為方塊兒加圓角兒、陰影、傾斜、漸變光效。做為小新的頭。
一個小長方型，做為長圓型，并加陰影
在上面蓋一個大圓，粉色部位變成一個彎彎的錐型
在大白圓上，再蓋一個加陰影、漸變光效的小圓
把表示頭部的大圓，蓋在表示頭發的拐彎上，再把頁面背景色定為白色，讓別人看不出遮罩層。小新就長出一根頭發了。
將頭發復制5份，每一根頭發，都細調大小和位置
眼睛就好畫多了，先畫一個白色的圓型，加灰邊、和粉色上陰影
蓋一個棕色的圓，加黑邊和陰影
再蓋兩個小白點兒，畫龍點睛
組合起來，就完成了。
實現起來比較費時間，但并沒有難度。需要注意的是position的用法，制作出正確的前后順序。
雖然不能比擬設計師用PS畫出來的栩栩如生，代碼寫的小新，嫵媚的券發像是一個個粗壯的小胳膊。組里有同學繪制的小浪人，也相當漂亮，浪的簡直了。不過抱著精心制作的精神，相信你們會比我畫的更好。
原碼在此：
001<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
002<html xmlns="">
003<head>
004<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005<title>小新頭像-新浪CDC</title>
006</head>
007<style>
008.sina{ margin:60px 0 0 22px;}
009.head{ position:relative; width:195px; height:220px;}
010.head_bg{ position:absolute; width:200px; height:175px; background:#ab2b41; left:6px; z-index:6;
011-moz-border-radius-topleft:200px 180px;
012-moz-border-radius-topright: 200px 180px;
013-moz-border-radius-bottomleft: 200px 180px;
014-moz-border-radius-bottomright: 200px 180px;
015-webkit-border-radius:200px 180px;
016-moz-transform: rotate(-6deg);
017-webkit-transform:rotate(-6deg);
018-moz-box-shadow:1px 4px 3px #333;
019-webkit-box-shadow:1px 4px 3px #333;
020border:1px solid #c03461;
021}
022
023.head_top{ position:absolute; top:-3px; left:5px; width:197px; height:167px;z-index:7;
024-moz-border-radius-topleft:200px 180px;
025-moz-border-radius-topright:200px 180px;
026-moz-border-radius-bottomleft:200px 180px;
027-moz-border-radius-bottomright:200px 180px;
028-webkit-border-radius:200px 180px;
029-moz-transform:rotate(-6deg);
030-webkit-transform:rotate(-6deg);
031background: -moz-linear-gradient(left top, #e16591, #ce3551 50%);
032background: -webkit-gradient(linear, 0 0, 0 50%, from(#e16591), to(#ce3551));
033}
034
035.head_shadow{ position:absolute; width:190px; height:162px; top:2px; left:10px; z-index:8;
036-moz-border-radius-topleft:200px 180px;
037-moz-border-radius-topright:200px 180px;
038-moz-border-radius-bottomleft:200px 180px;
039-moz-border-radius-bottomright:200px 180px;
040-webkit-border-radius:200px 180px;
041background: -moz-linear-gradient(left top, white, #ce3552 50%);
042background: -webkit-gradient(linear, left top, 10% 50%, from(#fff), to(#ce3552));
043}
044
045.head_a1{ width:54px; height:45px; position:absolute; top:-24px; right:32px;background:#d53960; z-index:5;
046border:1px solid #c03461;
047-moz-border-radius:180px 0;
048-webkit-border-radius:180px 0 180px 0;
049-moz-transform: rotate(-6deg);
050-webkit-transform:rotate(-6deg);
051-moz-box-shadow:4px 4px 0px #c03461;
052-webkit-box-shadow:4px 4px 0px #c03461;
053}
054
055.head_a1 .top{width:100px; height:100px; position:absolute; top:-80px; right:-11px; background:#fff; z-index:1;
056-moz-border-radius:135px;
057-webkit-border-radius:135px;
058}
059
060.head_a1 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;
061-moz-border-radius:135px 135px 135px 0;
062-webkit-border-top-left-radius:135px;
063-webkit-border-top-right-radius:135px;
064-webkit-border-bottom-right-radius:135px;
065-webkit-border-bottom-left-radius:0;
066
067-moz-transform: rotate(-60deg);
068-webkit-transform: rotate(-60deg);
069-moz-box-shadow:3px 4px 0px #c03461;
070-webkit-box-shadow:3px 4px 0px #c03461;
071}
072
073.head_a1 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-2px; z-index:3;
074-moz-border-radius:135px 135px 135px 0;
075-webkit-border-radius:135px 135px 135px 0;
076-moz-transform: rotate(-60deg);
077-webkit-transform: rotate(-60deg);
078background: -moz-linear-gradient(top, white, #ce3552 50%);
079background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
080}
081
082.head_a2{ width:60px; height:45px; position:absolute; top:-22px; right:-13px;background:#d53960; z-index:4;
083border:1px solid #c03461;
084-moz-border-radius:180px 0;
085-webkit-border-radius:180px 0 180px 0;
086-moz-transform: rotate(-10deg);
087-webkit-transform: rotate(-10deg);
088-moz-box-shadow:4px 4px 0px #c03461;
089-webkit-box-shadow:4px 4px 0px #c03461;
090}
091
092.head_a2 .top{width:40px; height:38px; position:absolute; top:-12px; right:7px; background:#fff; z-index:1;
093-moz-border-radius:180px 0 180px 0;
094-webkit-border-radius:180px 0 180px 0;
095-moz-transform: rotate(20deg);
096-webkit-transform: rotate(20deg);
097}
098
099.head_a2 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;
100-moz-border-radius:135px 135px 135px 0;
101-webkit-border-radius:135px 135px 135px 0;
102-moz-transform: rotate(-60deg);
103-webkit-transform: rotate(-60deg);
104-moz-box-shadow:3px 4px 0px #c03461;
105-webkit-box-shadow:3px 4px 0px #c03461;
106}
107
108.head_a2 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-1px; z-index:3;
109-moz-border-radius:135px 135px 135px 0;
110-webkit-border-radius:135px 135px 135px 0;
111-moz-transform: rotate(-60deg);
112-webkit-transform: rotate(-60deg);
113background: -moz-linear-gradient(top, white, #ce3552 50%);
114background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
115}
116
117.head_a3{ width:80px; height:47px; position:absolute; top:6px; right:-46px;background:#d53960; z-index:3;
118border:1px solid #c03461;
119-moz-border-radius:100px 0 110px 0;
120-webkit-border-radius:100px 0 110px 0;
121-moz-transform: rotate(-10deg);
122-webkit-transform: rotate(-10deg);
123-moz-box-shadow:4px 4px 0px #c03461;
124-webkit-box-shadow:4px 4px 0px #c03461;
125}
126
127.head_a3 .top{width:67px; height:38px; position:absolute; top:-18px; right:15px; background:#fff; z-index:1;
128-moz-border-radius:180px 0 180px 0;
129-webkit-border-radius:180px 0 180px 0;
130-moz-transform: rotate(40deg);
131-webkit-transform: rotate(40deg);
132}
133.head_a3 .body{width:23px; height:23px; position:absolute; top:-8px; right:-1px; background:#d53960; z-index:2;
134-moz-border-radius:135px 135px 135px 0;
135-webkit-border-radius:135px 135px 135px 0;
136-moz-transform: rotate(-72deg);
137-webkit-transform: rotate(-72deg);
138-moz-box-shadow:3px 4px 0px #c03461;
139-webkit-box-shadow:3px 4px 0px #c03461;
140}
141
142.head_a3 .shadow{width:19px; height:19px; position:absolute; top:-6px; right:0px; z-index:3;
143-moz-border-radius:135px 135px 135px 0;
144-webkit-border-radius:135px 135px 135px 0;
145-moz-transform: rotate(-60deg);
146-webkit-transform: rotate(-60deg);
147background: -moz-linear-gradient(top, white, #ce3552 50%);
148background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
149}
150
151.head_a4{ width:80px; height:47px; position:absolute; top:44px; right:-55px; background:#d53960; z-index:2;
152border:1px solid #c03461;
153-moz-border-radius:80px 0 110px 0;
154-webkit-border-radius:80px 0 110px 0;
155-moz-transform: rotate(8deg);
156-webkit-transform: rotate(8deg);
157-moz-box-shadow:4px 4px 0px #c03461;
158-webkit-box-shadow:4px 4px 0px #c03461;
159}
160
161.head_a4 .top{width:67px; height:38px;position:absolute; top:-18px; right:13px; background:#fff; z-index:1;
162-moz-border-radius:180px 0 180px 0;
163-webkit-border-radius:180px 0 180px 0;
164-moz-transform: rotate(40deg);
165-webkit-transform: rotate(40deg);
166}
167
168.head_a4 .body{width:23px; height:23px; position:absolute; top:-9px; right:-2px; background:#d53960; z-index:2;
169-moz-border-radius:135px 135px 135px 0;
170-webkit-border-radius:135px 135px 135px 0;
171-moz-transform: rotate(-70deg);
172-webkit-transform: rotate(-70deg);
173-moz-box-shadow:3px 4px 0px #c03461;
174-webkit-box-shadow:3px 4px 0px #c03461;
175}
176.head_a4 .shadow{width:19px; height:19px; position:absolute; top:-7px; right:-1px; z-index:3;
177-moz-border-radius:135px 135px 135px 0;
178-webkit-border-radius:135px 135px 135px 0;
179-moz-transform: rotate(-70deg);
180-webkit-transform: rotate(-70deg);
181background: -moz-linear-gradient(top, white, #ce3552 50%);
182background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
183}
184
185.head_a5{ width:54px; height:45px; position:absolute; top:87px; right:-45px; background:#d53960; z-index:1;
186border:1px solid #c03461;
187-moz-border-radius:135px 0 180px 0;
188-webkit-border-radius:135px 0 180px 0;
189-moz-transform: rotate(35deg);
190-webkit-transform: rotate(35deg);
191-moz-box-shadow:4px 4px 0px #c03461;
192-webkit-box-shadow:4px 4px 0px #c03461;
193}
194.head_a5 .top{width:100px; height:100px; position:absolute; top:-78px; right:-7px; background:#fff; z-index:1;
195-moz-border-radius:135px;
196-webkit-border-radius:135px;
197}
198.head_a5 .body{width:23px; height:23px; position:absolute; top:-6px; right:0px; background:#d53960; z-index:2;
199-moz-border-radius:135px 135px 135px 0;
200-webkit-border-radius:135px;
201-moz-transform: rotate(-70deg);
202-webkit-transform: rotate(-70deg);
203-moz-box-shadow:3px 4px 0px #c03461;
204-webkit-box-shadow:3px 4px 0px #c03461;
205}
206.head_a5 .shadow{width:19px; height:19px; position:absolute; top:-4px; right:2px; z-index:3;
207-moz-border-radius:135px 135px 135px 0;
208-webkit-border-radius:135px 135px 135px 0;
209-moz-transform: rotate(-70deg);
210-webkit-transform: rotate(-70deg);
211background: -moz-linear-gradient(top, white, #ce3552 50%);
212background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
213}
214
215.eye{ position:absolute; top:47px; left:27px; width:161px; height:88px; z-index:10;
216-moz-transform: rotate(-2deg);
217-webkit-transform: rotate(-2deg);
218}
219
220.eye1{ position:absolute; top:57px; left:59px; width:8px; height:8px; background:#fff; z-index:5;
221-moz-border-radius:180px;
222-webkit-border-radius:180px;
223}
224.eye2{ position:absolute; top:29px; left:81px; width:22px; height:22px; background:#fff; z-index:4;
225-moz-border-radius:180px;
226-webkit-border-radius:180px;
227}
228.eye3{ position:absolute; top:25px; left:56px; width:47px; height:47px; background:#000; z-index:3;
229-moz-border-radius:180px;
230-webkit-border-radius:180px;
231}
232.eye4{ position:absolute; top:14px; left:46px; width:67px; height:67px; border:1px solid #312613; background:#66383d; z-index:2;
233-moz-border-radius:180px;
234-webkit-border-radius:180px;
235-moz-box-shadow:0px 0px 5px #000;
236-webkit-box-shadow:0px 0px 5px #000;
237}
238.eye5{ position:absolute; top:1px; left:8px; width:137px; height:86px; background:#fff; z-index:1;
239border-top:5px solid #999;border-left:5px solid #999;
240-moz-border-radius:300px 30px 300px 30px;
241-webkit-border-radius:300px 30px 300px 30px;
242-moz-transform: rotate(20deg);
243-webkit-transform: rotate(20deg);
244-moz-box-shadow:0px -7px 0 #ec9dc2;
245-webkit-box-shadow:0px -7px 0 #ec9dc2;}
246
247</style>
248
249<body>
250<div class="sina">
251<div class="head">
252<div class="head_bg"></div>
253<div class="head_top"></div>
254<div class="head_shadow"></div>
255
256<div class="head_a1">
257<div class="top"></div>
258<div class="body"></div>
259<div class="shadow"></div>
260</div>
261<div class="head_a2">
262<div class="top"></div>
263<div class="body"></div>
264<div class="shadow"></div>
265</div>
266<div class="head_a3">
267<div class="top"></div>
268<div class="body"></div>
269<div class="shadow"></div>
270</div>
271<div class="head_a4">
272<div class="top"></div>
273<div class="body"></div>
274<div class="shadow"></div>
275</div>
276<div class="head_a5">
277<div class="top"></div>
278<div class="body"></div>
279<div class="shadow"></div>
280</div>
281
282<div class="eye">
283<div class="eye1"></div>
284<div class="eye2"></div>
285<div class="eye3"></div>
286<div class="eye4"></div>
287<div class="eye5"></div>
288</div>
289
290</div>
291
292</div>
293</body>
294</html>
新聞熱點
疑難解答
