CSS是Web前端設計中非常重要的一環，可以通過CSS樣式表實現各種炫酷的效果。本篇文章將教你通過CSS繪制一只可愛的皮卡丘。

首先，我們需要了解一些基礎知識。CSS基本上由兩個部分組成：

1. 選擇器：用于指定要樣式化的HTML元素，例如 h1、p、.className等。

2. 屬性：描述如何樣式化選擇器所定義的HTML元素，例如顏色、大小、字體等。

使用以上知識，讓我們開始制作皮卡丘。

/* 設置背景色 */
body {
background: #FFE600;
}
/* 畫出皮卡丘的頭部 */
#head {
width: 200px;
height: 200px;
background: #FFA000;
border-radius: 100px;
position: relative;
}
/* 兩只耳朵 */
.ear {
width: 80px;
height: 80px;
background: #FFA000;
border-radius: 50%;
position: absolute;
top: -30px;
}
/* 左耳朵 */
#left-ear {
left: 10%;
transform: rotate(-45deg);
}
/* 右耳朵 */
#right-ear {
right: 10%;
transform: rotate(45deg);
}
/* 手掌 */
.hand {
width: 60px;
height: 60px;
background: #FFA000;
border-radius: 50%;
position: absolute;
bottom: -20px;
}
/* 左手 */
#left-hand {
left: 10%;
}
/* 右手 */
#right-hand {
right: 10%;
}
/* 皮卡丘的小鼻子 */
#nose {
width: 20px;
height: 20px;
background: #FC5859;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
/* 皮卡丘的雙眼 */
.eye {
width: 20px;
height: 20px;
background: #000000;
border-radius: 50%;
position: absolute;
top: 30%;
}
/* 左眼 */
#left-eye {
left: 30%;
}
/* 右眼 */
#right-eye {
right: 30%;
}
/* 兩只眼珠 */
.pupil {
width: 8px;
height: 8px;
background: #FFFFFF;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 兩個小腮紅 */
.cheek {
width: 30px;
height: 30px;
background: #FD6463;
border-radius: 50%;
position: absolute;
top: 60%;
}
/* 左腮紅 */
#left-cheek {
left: 10%;
}
/* 右腮紅 */
#right-cheek {
right: 10%;
}

通過以上CSS代碼，你可以輕松實現一個可愛的皮卡丘。當然，這只是一個示例，你也可以根據個人喜好進行變更。快來動手試試吧！