css 购物车加减 |css中半圆怎么设置

.cart {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart button {
background-color: #4169E1;
color: #ffffff;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 18px;
cursor: pointer;
}
.cart .quantity {
font-size: 18px;
font-weight: 500;
text-align: center;
}
.cart .quantity-value {
font-size: 18px;
font-weight: 500;
margin: 0 10px;
}

在上面的 CSS 代码中，大家定义了一个购物车div.cart，其中包含加减按钮和数量显示。按钮的样式由button定义，数量的样式由.quantity-value定义。

让大家看一下HTML，它如何使用这个 CSS 样式：

-
1
+

在这个例子中，大家用到了 JavaScript 来实现购物车数量的加减。让大家看一下JavaScript代码：

var decreaseButton = document.getElementById("decrease");
var increaseButton = document.getElementById("increase");
var quantity = document.querySelector(".quantity-value");
var count = 1;
decreaseButton.addEventListener("click", function() {
count--;
quantity.innerHTML = count;
});
increaseButton.addEventListener("click", function() {
count++;
quantity.innerHTML = count;
});

代码分别获取减少和增加按钮以及数量显示，然后在按钮点击时更改数量并设置新的值。

这就是 CSS 购物车加减功能的简单实现。为了添加保护措施，大家需要加入对输入值的验证和数量的最小和最大值的限制。