css - 文本阴影未出现在打印中

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