CSS是網(wǎng)頁(yè)設(shè)計(jì)中非常重要的一門(mén)技術(shù)，它可以幫助我們實(shí)現(xiàn)各種各樣的效果。在這篇文章中，我們將會(huì)介紹如何使用CSS來(lái)實(shí)現(xiàn)加減按鈕。

html:
<div class="wrapper">
<button class="minus">-</button>
<span class="num">0</span>
<button class="plus">+</button>
</div>
css:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
border: 1px solid #ddd;
border-radius: 8px;
}
button {
width: 28px;
height: 28px;
background-color: #eee;
color: #333;
border: none;
cursor: pointer;
}
.num {
margin: 0 10px;
}
button:hover {
background-color: #ddd;
}

在代碼中，我們先定義了一個(gè)class為wrapper的div，然后在里面放置了兩個(gè)button和一個(gè)span。button分別設(shè)置了class為minus和plus，以及加減號(hào)。span設(shè)置了class為num，用于顯示當(dāng)前的數(shù)字。

接著，我們使用CSS對(duì)wrapper和其子元素進(jìn)行樣式設(shè)置。wrapper設(shè)置了寬高、邊框、圓角，并使用flex布局使其內(nèi)部元素水平居中，并在垂直方向上居中對(duì)齊。button設(shè)置了寬高、背景色、顏色、無(wú)邊框、鼠標(biāo)指針樣式等。num設(shè)置了左右邊距，用于使數(shù)字和按鈕之間有間隔。

最后，我們對(duì)button設(shè)置了hover樣式，當(dāng)鼠標(biāo)懸停在上面時(shí)，它的背景色會(huì)變?yōu)榛疑?/p>

通過(guò)上述CSS設(shè)置，我們成功地實(shí)現(xiàn)了簡(jiǎn)單的加減按鈕。在使用時(shí)，我們可以通過(guò)JavaScript將數(shù)字加減，并更新顯示在num元素中。