如何修复这个CSS bug border-image？

Question

我在添加border-image时遇到了一些CSS错误，然后将其旋转。在边框图像上旋转后，我们可以看到其他线条，我该如何删除它。没有轮换，一切看起来都不错。

height: 96px;
width: 260px;
vertical-align: middle;
display: table;
border: 26px solid transparent;
margin: 0 auto;
-webkit-border-image: url(/wp-content/uploads/2016/08/border.jpg) 48 stretch;
border-image: url(/wp-content/uploads/2016/08/border.jpg) 48 stretch;
-webkit-transition: all ease-in .3s;
transition: all ease-in .3s;
background-color: #cad584;
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
position: relative;

结果为

Answer 1

正如评论者提到的那样，你在jpeg的边缘看到了抗锯齿，它具有坚实的背景色。

相反，使用具有Alpha透明度的PNG，这样就没有可见的抗锯齿边缘。

你需要找到一些方法来阻止你的背景颜色通过边框显示 - 在下面的例子中，我只是用一个获得边框图像的外部div包裹它。可能有更优雅的解决方案！

<强> HTML：

<div class="outer">
    <div class="inner">Work for Us</div>
</div>

<强> CSS：

border-image: url(/wp-content/uploads/2016/08/border-with-alpha.png) 48 stretch;

JS小提琴：https://jsfiddle.net/ktxcs2c8/1/

原谅我可怕的边框图片和庞大的数据网址！

Answer 2

尝试transform: rotate(-2deg); translateZ(1px);

即使你改变旋转的度数，也要保持translateZ(1px)相同。

transform: rotate(-10deg); translateZ(1px);
transform: rotate(-4deg); translateZ(1px);
transform: rotate(6deg); translateZ(1px);