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

2019年7月21日 190次阅读

添加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;

结果是《如何修复这个CSS bug border-image？》

最佳答案 正如评论者提到的那样,你会看到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/

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

点赞