根据字体大小动态更改文本阴影x-y偏移量

<style>
  .text-with-shadow {
    position: relative;
    font-size: var(--font-size); /* 使用CSS变量定义字体大小 */
    text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) 0 #000; /* 使用CSS变量定义阴影偏移量 */
  }

  .text-with-shadow::before {
    content: attr(data-text); /* 使用伪元素的content属性获取文本内容 */
    position: absolute;
    top: 0;
    left: 0;
    color: #fff; /* 设置文本颜色为白色，以突出阴影效果 */
  }
</style>

<div class="text-with-shadow" style="--font-size: 24px; --shadow-offset-x: 2px; --shadow-offset-y: 2px;" data-text="Hello World!"></div>