我想在X和Y方向上按相同的絕對像素數量(不是相同的比例)縮放一個元素，這樣

newWidth = oldWidth + n
newHeight = oldHeight + n

其中n是尺寸增加的像素數，oldWidth和oldHeight未知。

在純CSS中有辦法做到嗎？

您可以像這樣使用CSS變量:

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

:root {
    --n: 100px
}
.sample {
    width: calc(300px + var(--n));
    height: calc(200px + var(--n));
}

更有活力，但不推薦:

:root {
    --n: 100px;
    --width: 100px;
    --height: 100px;
}
.sample {
    width: calc(var(--width) + var(--n));
    height: calc(var(--height) + var(--n));
}

和...

:root {
    --n: 100px;
    --width: 100px;
    --height: 100px;
    --new-width: calc(var(--n) + var(--width));
    --new-height: calc(var(--n) + var(--height));
}
.sample {
    width: var(--new-width);
    height: var(--new-height);
}

如果維度未知，就不能使用CSS。在這種情況下，只有JavaScript可以做到。

在JavaScript中要做到這一點，首先獲取元素的維度，然后動態地增加或減少一個值。

.parent {
  position: relative;
  width: 152px;
  height: 48px;  
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #444;
  cursor: pointer;
}

.parent:hover .children {
  /* scale x,y 16px */
  transform: scaleY(calc(100% - calc(calc(16 * 100%) / 48))) scaleX(calc(100% - calc(calc(16 * 100%) / 152)));
}

.children {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #888;  
  transition: transform 200ms linear;
  /* scale x,y 1px */
  transform: scaleY(calc(100% - calc(calc(1 * 100%) / 48))) scaleX(calc(100% - calc(calc(1 * 100%) / 152)));
}

.text {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <div class="children"></div>
  <div class="text">Hover me</div>
</div>