css - 按相同数量的像素缩放 X 和 Y 中的元素

Question

我想在 X 和 Y 方向上按相同绝对数量的像素(不相同的比例)缩放元素，这样

newWidth = oldWidth + n
newHeight = oldHeight + n

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

有没有办法在纯 CSS 中做到这一点？

Answer 1

您可以像这样使用 CSS 变量:

CSS

: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);
}