CSS是前端開發的核心技術之一，掌握它可以使我們的網站更加美觀、優化用戶體驗。今天，我們來學習一下如何自己寫一個加號，并使其變大。

/*先定義一個加號*/
.plus {
position: relative;
width: 30px;
height: 30px;
border: 4px solid #000;
border-radius: 50%;
margin: 0 auto;
}
/*定義加號的橫線和豎線*/
.plus:before, .plus:after {
content: "";
position: absolute;
background-color: #000;
}
/*橫線的樣式*/
.plus:before {
width: 20px;
height: 4px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*豎線的樣式*/
.plus:after {
width: 4px;
height: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*讓加號在鼠標懸停時變大*/
.plus:hover {
transform: scale(1.2);
}

要使加號變大，我們可以利用CSS的scale()屬性。該屬性可以改變元素的大小而不會改變其它布局特性。

在上面的代碼中，我們定義了一個名為“plus”的類，用來表示一個加號。并利用偽元素定義了加號的橫線和豎線樣式。

接著，我們在:hover偽類中使用transform: scale(1.2)，讓加號在鼠標懸停時變大。值為1.2表示將其放大1.2倍，你也可以根據自己需要進行調整。

要使用該樣式，只需在HTML中添加加號元素的類名即可。

<div class="plus"></div>

通過學習這個例子，我們可以看到CSS的魅力，只要掌握好一些基本的屬性和方法，創作出漂亮的網頁布局就不難了。