CSS 做商品加減框，可以讓網站上的購物體驗變得更加便捷，下面是一份給大家分享的示例代碼。

html,
body {
font-size: 16px;
}
.container {
width: 300px;
margin: 0 auto;
}
.quantity {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 1.2rem;
}
.quantity__button {
width: 30px;
height: 30px;
border: none;
border-radius: 30px;
color: #fff;
font-size: 1.2rem;
text-align: center;
background-color: #007bff;
cursor: pointer;
}
.quantity__input {
width: 50px;
height: 30px;
border: none;
font-size: 1.2rem;
text-align: center;
}
.quantity__input::-webkit-inner-spin-button,
.quantity__input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity__input:focus {
outline: none;
}

HTML 代碼：

<div class="container">
<div class="quantity">
<button class="quantity__button quantity__button--minus">-</button>
<input class="quantity__input" type="number" value="1">
<button class="quantity__button quantity__button--plus">+</button>
</div>
</div>

以上代碼實現了一個商品數量的加減框，通過 CSS 樣式調校，讓其顯示更加優美。在 CSS 中，主要采用了以下技術實現：

• 使用 flex 布局和 justify-content、align-items 屬性實現加減框水平居中、垂直居中對齊。
• 使用 border-radius 屬性實現圓角按鈕。
• 通過 focus 偽類去掉 input 輸入框的默認輪廓。
• 通過 -webkit-inner-spin-button 和 -webkit-outer-spin-button 屬性去掉 input 輸入框的默認加減按鈕。

在網頁開發中，通過 CSS 樣式的調整，可以使界面更加美觀，同時也更加易于使用，帶來更好的用戶體驗。