CSS样式

让线条看起来更细，比1px跟细

在 box-shadow 属性中，控制线条粗细的参数是第二个和第三个数值。第二个数值（在这个例子中是 1px）表示阴影的垂直偏移量，而第三个数值（1px）是模糊半径。模糊半径增加时，阴影会看起来更模糊、更广，因此线条看起来会更细。负值的模糊半径（如 -1px）会使阴影的边缘更锐利，线条看起来更明显。

如果您希望使用 var(--theme-text-color) 作为颜色，并希望线条看起来更细，您可以调整模糊半径并减小垂直偏移量。例如：

.header-top {
    box-shadow: 0 0.5px 0.5px -0.5px white;
}

在这个例子中，我将垂直偏移量减少到 0.5px，模糊半径设置为 0.5px，并将模糊半径的负值调整为 -0.5px。这将创建一个非常细的阴影线，其颜色由 var(--theme-text-color) 定义。您可以根据需要进一步调整这些值。

设置div宽度

子div由于padding和border导致的宽度超出父div问题，可以使用CSS的box-sizing属性。将.recharge-amount的box-sizing设置为border-box，这样padding和border的宽度将会包含在元素的总宽度内，而不是额外增加。

通过设置box-sizing: border-box;，元素的总宽度会计算包括border和padding在内，从而使元素的实际宽度不会超出父容器。这种方法广泛用于响应式布局中，以确保元素布局的一致性和准确性。