用CSS寫出一個計算器非常有趣。首先，我們需要了解一些基本的HTML和CSS知識。我們通過使用p標簽來組織我們的文章段落，使用pre標簽來展示我們的CSS代碼。

.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
background-color: #fff;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.calculator button {
font-size: 24px;
padding: 10px;
border: none;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.calculator button:hover {
background-color: #eee;
}
.calculator button:active {
box-shadow: none;
}
.calculator .output {
grid-column: 1 / span 4;
padding: 10px;
font-size: 36px;
text-align: right;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

上面是一個簡單的CSS代碼示例，它可以創建一個帶有基本算術功能的計算器。在代碼中，我們使用了CSS Grid布局來創建了一個grid容器，其中每個按鈕都使用了button元素。我們還定義了一些按鈕的樣式，如字體大小、內邊距和圓角等。我們還創建了一個樣式名為output的元素，并定義了它的樣式，以顯示計算結果。我們在代碼中還添加了一些鼠標懸停和活動狀態的效果，以使計算器更加互動。

通過CSS創建一個計算器是一個有趣的項目，它需要一定的HTML和CSS知識。我們希望上面的示例代碼可以為你提供幫助，讓你可以編寫出一個自己的、獨特的計算器！