CSS是前端開發中不可或缺的技術之一，它可以用來控制網頁的樣式和布局。而在電商網站中，如何實現增加和減少商品數量的功能呢？本文將介紹利用CSS實現這一功能的方法。

/* CSS代碼 */
.quantity {
display: flex; /* 將增減按鈕和數量框橫向排列 */
align-items: center; /* 垂直居中 */
}
.quantity input[type="number"] {
width: 50px; /* 數字框寬度 */
text-align: center; /* 居中對齊 */
}
.quantity button {
width: 25px; /* 按鈕寬度 */
height: 25px; /* 按鈕高度 */
font-size: 16px; /* 字號大小 */
font-weight: bold; /* 粗體字 */
border: none; /* 去掉邊框 */
cursor: pointer; /* 鼠標指針形狀 */
background-color: #ddd; /* 按鈕背景色 */
}
.quantity button:hover {
background-color: #aaa; /* 鼠標懸停時背景色 */
}
.quantity button:focus {
outline: none; /* 去掉按鈕點擊后的虛線框 */
}

上述代碼中，利用了flex布局將增減按鈕和數量輸入框橫向排列，并設置了樣式使其在垂直居中的位置。

在HTML代碼中，只需添加如下代碼即可：

-+

其中，“-”按鈕用于減少商品數量，“+”按鈕用于增加商品數量。點擊按鈕時，可以利用JavaScript監聽事件并修改數量輸入框中的數值。CSS樣式控制按鈕和輸入框的外觀。

因此，利用CSS可以很方便地實現增加商品數量的功能，而且樣式美觀易操作。