在前端開發中，CSS是必不可少的技能之一。今天，我們來嘗試使用CSS來畫出百事可樂的圖案。

/* 畫出圓形底部 */
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}
/* 畫出白色泡沫 */
.bubble {
width: 180px;
height: 40px;
border-radius: 50%;
background-color: white;
position: relative;
top: -20px;
left: 10px;
}
/* 畫出紅色可樂 */
.coke {
width: 160px;
height: 160px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -190px;
left: 20px;
}
/* 加上百事可樂的字樣 */
.coke:after {
content: "Pepsi";
font-size: 40px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上代碼就是繪制百事可樂圖案的全部代碼。我們首先畫出圓形底部，然后在底部加上白色泡沫和紅色可樂。最后，使用CSS的偽元素加上百事可樂的字樣。

通過這個小例子，我們可以看到CSS在繪制圖形方面的強大之處。通過變換不同的CSS屬性和組合，我們可以創造出很多有趣的東西。希望這篇文章能對你有所啟發，也歡迎大家在實踐中不斷嘗試。