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

Question

我有一个元素集，边框图像不均匀，需要在边上重复。除了Chrome 56.0.2924.76之外，所有浏览器都能完美运行，但在较新版本和较旧版本的Chrome中都可以使用。

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

（抱歉，我不得不模糊一些内容，客户端网站尚未生效）

https://jsfiddle.net/np1kmsut/1/

.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

我希望这有帮助！