CSS 自定义属性无法在文本阴影下正常工作

Question

我有这个代码，我正在尝试使用CSS变量将阴影应用于文本。

:root {
  --color-primary: #03a9f4;
  --color-primary-rgb: 3, 169, 244;
}
.ms-logo-white {
      color: var(--color-primary);
      background-color: #fff;
      text-shadow: 1px 1px 0 rgba(var(--color-primary-rgb), 0.05),
              1px 2px 0 rgba(var(--color-primary-rgb), 0.05),
              1px 3px 0 rgba(var(--color-primary-rgb), 0.05),
              2px 4px 0 rgba(var(--color-primary-rgb), 0.05),
              3px 5px 0 rgba(var(--color-primary-rgb), 0.05),
              4px 6px 0 rgba(var(--color-primary-rgb), 0.05),
              5px 7px 0 rgba(var(--color-primary-rgb), 0.05),
              6px 8px 0 rgba(var(--color-primary-rgb), 0.05),
              7px 9px 0 rgba(var(--color-primary-rgb), 0.05),
              8px 10px 0 rgba(var(--color-primary-rgb), 0.05),
              9px 11px 0 rgba(var(--color-primary-rgb), 0.05),
              10px 12px 0 rgba(var(--color-primary-rgb), 0.05),
              11px 13px 0 rgba(var(--color-primary-rgb), 0.05),
              12px 14px 0 rgba(var(--color-primary-rgb), 0.05),
              13px 15px 0 rgba(var(--color-primary-rgb), 0.05),
              14px 16px 0 rgba(var(--color-primary-rgb), 0.05),
              15px 17px 0 rgba(var(--color-primary-rgb), 0.05),
              16px 18px 0 rgba(var(--color-primary-rgb), 0.05),
              17px 19px 0 rgba(var(--color-primary-rgb), 0.05),
              18px 20px 0 rgba(var(--color-primary-rgb), 0.05),
              19px 21px 0 rgba(var(--color-primary-rgb), 0.05),
              20px 22px 0 rgba(var(--color-primary-rgb), 0.05),
              21px 23px 0 rgba(var(--color-primary-rgb), 0.05);
  }

这在桌面浏览器中效果很好，但是它在移动设备中不起作用，其中具有不透明度1的颜色应用于所有阴影。

Answer 1

我找到了解决方案。如果定义了中间变量，则可以工作。

:root {
  --color-primary: #03a9f4;
  --color-primary-rgb: 3, 169, 244;
}
&.ms-logo-white {
      --color-shadow: rgba(var(--color-primary-rgb), 0.05);
      color: var(--color-primary);
      background-color: #fff;
      text-shadow: 1px 1px 0 var(--color-shadow),
              1px 2px 0 var(--color-shadow),
              1px 3px 0 var(--color-shadow),
              2px 4px 0 var(--color-shadow),
              3px 5px 0 var(--color-shadow),
              4px 6px 0 var(--color-shadow),
              5px 7px 0 var(--color-shadow),
              6px 8px 0 var(--color-shadow),
              7px 9px 0 var(--color-shadow),
              8px 10px 0 var(--color-shadow),
              9px 11px 0 var(--color-shadow),
              10px 12px 0 var(--color-shadow),
              11px 13px 0 var(--color-shadow),
              12px 14px 0 var(--color-shadow),
              13px 15px 0 var(--color-shadow),
              14px 16px 0 var(--color-shadow),
              15px 17px 0 var(--color-shadow),
              16px 18px 0 var(--color-shadow),
              17px 19px 0 var(--color-shadow),
              18px 20px 0 var(--color-shadow),
              19px 21px 0 var(--color-shadow),
              20px 22px 0 var(--color-shadow),
              21px 23px 0 var(--color-shadow);
  }

我认为这是移动浏览器中的错误。至少它发生在iOS的Chrome和Safari中。