CSS中的數值屬性可以進行加減，使其更加靈活和易于使用。下面我們就來看一下在CSS中可以進行加減的幾種情況。

/* 1. 像素值的加減 */
/* 在CSS中，像素值可以直接進行加減計算 */
div {
width: 100px;
height: 100px;
margin: 10px;
padding: 5px;
border: 2px solid #000;
/* 通過加減來設置位置 */
position: absolute;
top: 50px;
left: 50px;
/* 通過加減來設置寬高 */
width: calc(100px + 20px);
height: calc(100px + 20px);
}
/* 2. 顏色值的加減 */
/* 在CSS中，顏色值可以使用RGB或HSB進行加減 */
div {
color: rgb(255, 0, 0); /* 紅色 */
background-color: hsb(60, 100%, 50%); /* 黃綠色 */
}
/* 3. 百分比的加減 */
/* 在CSS中，百分比也可以直接進行加減計算 */
div {
width: 50%;
height: 50%;
margin: 10% 20%;
}
/* 4. 計數器的加減 */
/* 在CSS中，可以使用計數器進行加減操作 */
/* 設置計數器 */
body {
counter-reset: section; /* 重置計數器 */
}
/* 使用計數器 */
h1:before {
counter-increment: section; /* 計數器加1 */
content: "Section " counter(section) ". "; /* 輸出計數器值 */
}
/* 5. 自定義屬性的加減 */
/* 在CSS中，也可以定義自己的屬性并進行加減操作 */
:root {
--box-size: 100px; /* 定義屬性 */
}
div {
width: var(--box-size);
height: var(--box-size);
}
div:hover {
/* 增加10個像素 */
--box-size: calc(var(--box-size) + 10px);
}