大家都知道皮卡丘是寶可夢中的一個(gè)著名角色，而在網(wǎng)頁設(shè)計(jì)中，我們也可以用CSS來制作一個(gè)可愛的皮卡丘。

.pikachu {
position: relative;
border-radius: 50%;
background-color: #FFCB4C;
width: 10em;
height: 10em;
}
.pikachu:before {
content: "";
position: absolute;
background-color: #222222;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
left: 30%;
top: 30%;
}
.pikachu:after {
content: "";
position: absolute;
background-color: #222222;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
right: 30%;
top: 30%;
}
.pikachu .cheek {
position: absolute;
background-color: #FE6F6D;
width: 2.5em;
height: 2.5em;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.pikachu .cheek.left {
left: 20%;
}
.pikachu .cheek.right {
right: 20%;
}
.pikachu .ear {
position: absolute;
border-radius: 50%;
background-color: #FFCB4C;
width: 3em;
height: 3em;
transform: rotate(-45deg);
}
.pikachu .ear.left {
left: -1.5em;
top: -0.5em;
}
.pikachu .ear.right {
right: -1.5em;
top: -0.5em;
}
.pikachu .mouth {
position: absolute;
width: 2.5em;
height: 0.6em;
background-color: #222222;
border-radius: 50%;
left: 50%;
bottom: 20%;
transform: translateX(-50%);
}

以上是皮卡丘的CSS樣式代碼。接下來，我們需要在HTML中添加相應(yīng)的代碼，才能呈現(xiàn)出可愛的皮卡丘形象。

<div class="pikachu">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="cheek left"></div>
<div class="cheek right"></div>
<div class="mouth"></div>
</div>

最后，我們通過CSS樣式的添加、修改，以及將HTML代碼插入網(wǎng)頁中，就可以看到一個(gè)十分可愛的皮卡丘啦！