文字阴影不会出现在打印中

Question

我有以下用于标题的css：

h1 {
    color: white;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

这是我用于打印的CSS：

    @media print {
        h1 {
            -webkit-print-color-adjust:exact;
        }
    }

当我尝试使用Chrome打印时，我只会得到一个空白框。

Answer 1

以下是解决方案：

h1 {
  text-shadow: 1px 0 #000, 0 1px #000, -1px 0 #000, 0 -1px #000;
}

@media print {
  -webkit-filter: drop-shadow(1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 -1px 0 #000);
  text-shadow: 1px 0 #000, 0 1px #000, -1px 0 #000, 0 -1px #000;
}