1

我有一个元素集，其边框图像不统一，需要在边缘重复。在除 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>

4

1 回答 1

1

您可能已经尝试过的快速解决方案border-image-repeat是将属性设置为stretch. 当然，它看起来……拉长了。

否则，问题与您的图像尺寸及其与边界图像切片的相互作用有关。使用方形图像（我使用 250 像素 x 250 像素），您应该已准备就绪。

小提琴

我希望这有帮助！

于 2017-03-31T04:55:53.803 回答