@media 在 Chrome 下打印 text-shadow答案

【问题标题】：@media Print text-shadow under Chrome@media 在 Chrome 下打印 text-shadow
【发布时间】：2016-02-05 01:06:10
【问题描述】：

当我为文本添加 css 规则“text-shadow”时，它没有显示在 @media print（另存为 PDF）中，并且在Chrome。

它在 IE11 下运行良好，但在 Chrome 下运行 - 不行！这让我非常-非常失望！

这是一个简单的文本阴影示例：

.item { text-shadow: 4px 4px 1px #ccc; }

那么问题是如何在Chrome下强制打印“text-shadow”？在我的情况下，它也应该是多个阴影，就像这样：

 .item { text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0px -1px 0 #fff; }

文本周围的白色边框。

【问题讨论】：

标签： html css google-chrome printing

【解决方案1】：

恐怕 Nazar 提供的解决方案似乎不适用于 Chrome 版本 51.0.2704.103 m。我可以使用调试菜单“渲染 > 模拟媒体”并启用打印模式来查看文本阴影。但是当尝试打印（实际上保存为 PDF）时，阴影不再可见。另外，我必须添加它以使文本在打印预览中可见：

-webkit-transform: translate3d(0,0,0) !important;

【讨论】：

【解决方案2】：

解决方法是-webkit-filter: drop-shadow(4px 4px 1px #ccc)。

示例如下：

@media print {
  /* CSS only for Chrome */
  @media print and (-webkit-min-device-pixel-ratio:0) {
    .item { -webkit-filter: drop-shadow(4px 4px 1px #ccc); }
  }
}

如果您需要多个文本阴影，请使用它：

.item {
  -webkit-filter: drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff);
}

这是最终的 CSS：

@media print {
  .item {
    -webkit-filter: drop-shadow(4px 4px 1px #ccc);
    text-shadow: 4px 4px 1px #ccc;
  }
}

【讨论】：

我没有马上理解这个答案，所以这里是简短的版本：对于 Chrome，只需将 text-shadow: text-shadow: 4px 4px 1px #ccc; 替换为 -webkit-filter: drop-shadow(4px 4px 1px #ccc); 无需组合任何内容或指定媒体。但是 PDF 中的最终结果可能是模糊的，这是 Chrome 中的一个错误。