css - 打印时不显示CSS webkit-linear-gradient

Question

This question already has answers here:

Print CSS generated gradient
                                
                                    （2个答案）
                                
                        
                                在11个月前关闭。
            
                    
我正在使用CSS线性渐变为textarea中的每一行加上边框，如以下代码所示：

textarea {
    line-height: 20px !important;
    margin: 0;
    padding: 0;
    border: none;
    background-image: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%), -webkit-linear-gradient(bottom, black 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%), -moz-linear-gradient(bottom, black 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-image: -o-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%), -o-linear-gradient(bottom, black 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
    background-size: 3px 20px;
}

该代码已运行，但无法打印。如何在任何浏览器中打印？

最佳答案

您不再需要供应商前缀，您可以删除所有前缀并按如下所示编写渐变：

textarea {
    line-height: 20px !important;
    margin: 0;
    padding: 0;
    border: none;
    background-image: 
      linear-gradient(to right, 
        rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%,
        rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%), 
      
      linear-gradient(to bottom, 
        black 0%, rgba(128,128,128,0) 8%,
        rgba(128,128,128,0) 100%);
    background-size: 3px 20px;
}

<textarea></textarea>

您还可以像这样简化：

textarea {
    line-height: 20px !important;
    margin: 0;
    padding: 0;
    border: none;
    background: 
      radial-gradient(circle, #000 1px,transparent 1px) 0 9px/3px 20px;

}

<textarea></textarea>

关于css - 打印时不显示CSS webkit-linear-gradient ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54944613/

上一篇：html - 背景图片仅在 ipad 上的 safari 刷新时出现

下一篇：Javascript 正确碰撞后重置函数

Answer 1

您不再需要供应商前缀，您可以删除所有前缀并按如下所示编写渐变：

textarea {
    line-height: 20px !important;
    margin: 0;
    padding: 0;
    border: none;
    background-image: 
      linear-gradient(to right, 
        rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%,
        rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%), 
      
      linear-gradient(to bottom, 
        black 0%, rgba(128,128,128,0) 8%,
        rgba(128,128,128,0) 100%);
    background-size: 3px 20px;
}

<textarea></textarea>

您还可以像这样简化：

textarea {
    line-height: 20px !important;
    margin: 0;
    padding: 0;
    border: none;
    background: 
      radial-gradient(circle, #000 1px,transparent 1px) 0 9px/3px 20px;

}

<textarea></textarea>