html - 打印时未显示边框半径圆 Angular

我感兴趣地阅读了this link

但这并没有帮助我理解为什么 border-radius 的问题没有出现在打印上。

它们显示在浏览器中，但不打印。

HTML

<div class="card">

    <div class = "qr">
    <div id ="qr1"></div>
    <?php echo $_POST["url"]; ?>
    <div id ="qr2"></div>
    <div id ="qr3"></div>
    <div id ="qr4"></div>

    </div>

    <div class = "desc">
    <div>Site title</div>
    <div><?php echo $_POST["titleText"] ?></div>
    <div>Hosting site</div>
    <div><?php echo $_POST["hostText"] ?></div>
    <div>Who made this site?</div>
    <div><?php echo $_POST["orgText"] ?></div>
    <div>Other information</div>
    <div><?php echo $_POST["commentText"] ?></div>
    </div>

</div>

CSS

.qr {
float:left;   
position: relative;
width: 30%;
}

.desc {
float:left;
width: 70%;
}

.card {
width: 100%;
position: relative;
border-top: 30px solid black;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 5px;
}

我读过的所有内容都表明我做对了。任何发现我遗漏的帮助都将不胜感激。

最佳答案

边框和 HR 被认为是背景图像，因此默认情况下不会与您的页面一起打印。如果要允许它们打印，则必须手动选择打印页面背景。

我不知道在所有浏览器上您在哪里可以找到此设置，但我知道在 Chrome 中，该设置位于打印对话框中。我假设在其他浏览器中有类似的位置。

enter image description here