为什么css 写梯形页面样式对的 但是 打印到A4纸上样式就不对了呢

Question

为什么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 打印显示的：

它的样式不对了 不知道为什么？
就是我想实现的是这种 中间背景是白色 有边框的梯形

Answer 1

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

所以你别奢望打印的样式会跟你浏览器看到的一致

这里有一篇打印样式CSS的技巧和要点， 希望对你有帮助

修改 - 1

不知道的你代码是怎样的，应该是兼容问题。

下面这段代码是可以在打印界面预览的

<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

既然已经实现梯形在打印视图上了，那么灵活变动下就可以实现的你的要求了。

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>