网页Ctrl+P保存PDF时box-shadow消失的解决方法咨询

浏览器默认打印样式会优化视觉效果以节省墨水，这是导致阴影不显示的核心原因，以下是几种可行的解决方法：

• 强制在打印样式中保留阴影
  通过@media print媒体查询，配合print-color-adjust属性强制浏览器准确渲染阴影：

  @media print {
    .pill-shap {
      box-shadow: 0px 5px 5px 1px rgba(49, 49, 49, 0.3) !important;
      -webkit-print-color-adjust: exact; /* 适配WebKit内核浏览器（如Chrome） */
      print-color-adjust: exact; /* 标准属性 */
    }
  }
  

  print-color-adjust: exact会告诉浏览器不要对打印样式做优化，完整保留元素的视觉效果，!important确保覆盖浏览器默认的打印样式规则。

• 开启浏览器打印的背景图形选项
  多数浏览器默认关闭了背景图形打印，这会直接影响阴影的渲染：

  • Chrome：打开打印预览后，点击「更多设置」，勾选「背景图形」
  • Firefox：进入打印预览界面，点击「页面设置」，勾选「打印背景（颜色和图像）」

• 用filter: drop-shadow()替代box-shadow（备选方案）
  部分浏览器对打印时的drop-shadow滤镜支持更好，可以同时保留原box-shadow用于屏幕显示，添加drop-shadow适配打印：

  .pill-shap {
    width: 100%;
    height: 147px;
    border-radius: 100px;
    box-shadow: 0px 5px 5px 1px rgba(49, 49, 49, 0.3); /* 屏幕显示用 */
    filter: drop-shadow(0px 5px 5px rgba(49, 49, 49, 0.3)); /* 打印适配用 */
    display: flex;
    padding: 0;
  }
  
  @media print {
    .pill-shap {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
  

  注意：drop-shadow没有box-shadow的扩散半径参数，需要调整参数匹配原阴影效果。

内容的提问来源于stack exchange，提问作者Web Dev