為什么css 寫梯形頁面樣式對的但是打印到A4紙上樣式就不對了呢

為什么css 寫梯形頁面樣式對的但是打印到A4紙上樣式就不對了呢?
css代碼:

<style>
    .tab { 
        position: relative; 
        display: inline-block;
         padding: .5em 1em .35em; 
    } 
    .tab::before { 
        content: ''; /* To generate the box */ 
        position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
        z-index: -1; 
        background: #fff; 
        border: 5px solid pink; 
        transform: perspective(.5em) rotateX(5deg);
    }
    </style>

html代碼：

<div class="tab">
    hahah
</div>

這個是頁面效果：

下面這個是我ctr+p 打印顯示的：

它的樣式不對了不知道為什么？
就是我想實現(xiàn)的是這種中間背景是白色有邊框的梯形

回答

編輯回答

鹿惑

首先你要清楚的知道，打印樣式和瀏覽器對CSS的兼容性是不一樣，就好像最新版chrome和IE8對css的兼容性一樣。

所以你別奢望打印的樣式會跟你瀏覽器看到的一致

這里有一篇打印樣式CSS的技巧和要點，希望對你有幫助

修改 - 1

不知道的你代碼是怎樣的，應(yīng)該是兼容問題。

下面這段代碼是可以在打印界面預(yù)覽的

<style>

.temp{  
    width:100px;  
    height:0;  
    border-width:0 25px 50px 25px;  
    border-style:none solid solid;  
    border-color:transparent transparent red;  
}  
</style>

<div class="temp">Hello</div>

圖片描述

修改 - 2

既然已經(jīng)實現(xiàn)梯形在打印視圖上了，那么靈活變動下就可以實現(xiàn)的你的要求了。

demo1 利用div模擬四條邊

<style>
.app{
    margin-bottom: 20px;
    height: 50px;
    width: 200px;
    text-align: center;
    position: relative;
}
.top{
    margin: 0 25px;
    height: 0px;
    border-width:0 2px 2px 2px;  
    border-style:none solid solid;  
    border-color:transparent transparent red;  
}

.center{
    height: 46px;
    line-height: 50px;
    text-align: center;
    width: 200px;
}
.bottom{
    height: 0px;
    border-width:0 2px 2px 2px;  
    border-style:none solid solid;  
    border-color:transparent transparent red;  
}

.left{
    position: absolute;
    top: 0;
    left: 12px;
    height: 47.5px;
    border: 1.2px solid red;
    transform: skewX(-28deg);
    
}

.right{
    position: absolute;
    top: 0;
    right: 12px;
    height: 47.5px;
    border: 1.2px solid red;
    transform: skewX(28deg);
    
}
</style>
<div class="app">
    <div class="top"></div>
    <div class="center">Demo 1</div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

demo2 兩個梯形重疊

<style>
.app{
    margin-bottom: 20px;
    height: 50px;
    width: 200px;
    text-align: center;
    position: relative;
}
.temp{  
    width:150px;  
    height:0;  
    border-width:0 25px 50px 25px;  
    border-style:none solid solid;  
    border-color:transparent transparent red;  
}  

.temp1{  
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 148px;
    height: 0;
    border-width: 0 23px 46px 23px;
    border-style:none solid solid;  
    border-color:transparent transparent #fff;  
}  

</style>
<div class="app">
    <div class="temp"></div>
    <div class="temp1">
        Demo 2
    </div>    
        
</div>

圖片描述

2018年6月9日 03:20