@media在Chrome下打印文本阴影 [英] @media Print text-shadow under Chrome

问题描述

当我为文本添加css规则 text-shadow 时，不会在 @media print （另存为PDF）中显示， Chrome 。

When I add the css rule "text-shadow" for text it does not shown in @media print (save as PDF) and it does not work specially under Chrome.

它在IE11下非常适合Chrome，
这让我很失望！

It works excellent under IE11 but under Chrome - not! It makes me very -very disappointed!

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

Here is the simple text-shadow example:

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

所以问题是如何强制打印 text-shadow 在 Chrome 下？
在我的case它也应该是多个阴影，像这样：

So the question is how to force print "text-shadow" under Chrome? In my case it also should be multiple shadows, something like that:

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

文字周围的白色边框。

推荐答案

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

如果您需要多个文字阴影：

And if you need multiple text-shadows use it:

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

这篇关于@media在Chrome下打印文本阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！