我該如何解決這個CSS bug border-image？

當我添加border-image然後旋轉它時遇到了一些CSS錯誤。在邊界圖像上旋轉後，我們可以看到更多的線條，我怎麼去除它。沒有旋轉，所有看起來不錯我該如何解決這個CSS bug border-image？

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;

這是結果

來源

2016-08-26 Maxim

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在[**堆棧片段**]（https://blog.stackoverflow.com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /）理想地與實際圖像。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

另外，您還可以在代碼中引用文本中的「translate」，但使用「rotate」。 –

這不是一個錯誤，它是CSS項目旋轉的方式。這與抗鋸齒有關。最好的方法是將圖像保存爲旋轉狀態。 – Lee

正如評論者所提到的，你看到的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/

原諒我糟糕的邊界圖像，和巨大的數據URL！

來源

2016-08-26 12:35:05 beercohol

非常感謝！ – Maxim

嘗試transform: rotate(-2deg); translateZ(1px);

離開translateZ(1px)即使您不同的旋轉程度相同。

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

來源

2016-08-26 13:48:23

我該如何解決這個CSS bug border-image？

回答

相關問題