Chrome没有打印出文本阴影@media print

Question

我刚刚修改了表格中的一些 td，因为我使用的是分离的彩色背景，我的问题是当我使用半白色和半棕色背景时，除非我设置 text-shadow，否则文本不可见

这是在 Safari 上打印出来的样子。如您所见，文本有一个边框阴影。这一切都在我下面的代码中设置。

border-radius: 5px;
border:1px;
border-color:#000;
-webkit-text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-webkit-print-color-adjust: exact;
font-family: Arial, Helvetica, sans-serif;
font-size:40px;
text-align: center;
border-style: solid;
padding: 0px;
color: #000;
width: 80px; 
height: 80px;
vertical-align: -52px;
font-weight: bold;
-webkit-print-color-adjust: exact;
}

当我尝试在 Chrome 上打印出来时，除了文本阴影之外，所有的工作都与 safari 相同。应该读mlk。

以前有人遇到过这个问题吗？

Answer 1

试试这样的@media Print text-shadow under Chrome。请参阅下面的 sn-p。

.shadow {
  border-radius: 5px;
  border: 1px;
  border-color: #000;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  text-align: center;
  border-style: solid;
  padding: 0px;
  color: #fff;
  width: 80px;
  height: 80px;
  vertical-align: -22px;
  font-weight: bold;
  background: linear-gradient(to right, #ffffff 0%,#ffffff 48%,#752201 52%,#752201 100%);
}
/*
     this is the part you are interested in
*/
@media print {
  @media print and (-webkit-min-device-pixel-ratio: 0) {
    .shadow {
      -webkit-filter: drop-shadow(-1px 0 black) drop-shadow(0 1px black) drop-shadow(1px 0 black) drop-shadow(0 -1px black);
    }
  }
  /*
  additional print specific css styling can go  here
  */
}

<div class='shadow'>mlk</div>