CSS3 border-image Repeat 在 Chrome 56 中不起作用

Question

我有一个元素集，其边框图像不统一并且需要在边缘重复。在除 Chrome 56.0.2924.76 之外的所有浏览器中都能完美运行，但在 chrome.

的新旧版本中都可以正常工作

在不起作用的版本中，它会在边缘重复，但不会在定义切片的地方重复。

（抱歉，我不得不模糊一些内容，客户端站点尚未上线）

.main-content {
  background: url('../images/texture-bg-light.jpg');
  border-style: solid;
  border-width: 69px 74px 24px 74px;
  -moz-border-image: url(http://10poundgorilla.com/-temp/sign-border-mobile.jpg) 69 74 24 74 repeat;
  -webkit-border-image: url(http://10poundgorilla.com/-temp/sign-border-mobile.jpg) 69 74 24 74 repeat; 
  -o-border-image: url(http://10poundgorilla.com/-temp/sign-border-mobile.jpg) 69 74 24 74 repeat; 
  border-image: url(http://10poundgorilla.com/-temp/sign-border-mobile.jpg) 69 74 24 74 repeat;

  margin: 0 2rem 256px 2rem;
  padding: 3.3rem 0 0 0;
  position: relative;
  text-align: center;
 }

<div class="main-content">
<h1>Testing</h1>
</div>

Answer 1

您可能已经尝试过的一个 quick-n-dirty solution 是将 border-image-repeat 属性设置为 stretch。当然看起来……绷紧了。

否则，问题与图像的尺寸及其与边框图像切片的相互作用有关。使用方形图片（我使用 250px x 250px），你应该已经准备好了。

Fiddle

希望对您有所帮助！

CSS3 border-image Repeat 在 Chrome 56 中不起作用

CSS3 border-image Repeat Not working in Chrome 56

css

google-chrome

border

border-image