html - @media Chrome 下打印文字阴影

Question

当我为文本添加 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; }

文本周围有白色边框。

Answer 1

解决方案是-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;
  }
}