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中会发生这种情况。

CSS自定义属性不适用于文本阴影

1 个答案: