0

由于我不确定这是编程方式还是照片编辑方式，因此我将其发布在这里。如果我不得不将其发布到其他地方，我深表歉意。

无论如何，我正在尝试使用该border-image属性使用此图像制作漂亮的边框： 我在网上找到的边框图片

但这并不适合我。我出现了奇怪的现象。这是我的代码： 

#div{
        -webkit-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Safari 3.1-5 */
        -o-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Opera 11-12.1 */
        border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat;
    	border-width: 100px;
    	border-style: solid;
    	height: 200px;
    	width: 100px;
    }
  <body>
  <div id="div">Hello world!!!</div>
  </body>

JSFiddle

所以，我需要一些技巧来解决这个问题。结果应该是这样的（不完全是，类似的）：

同样，边框应该是这样的

请注意，不会定义宽度。可以延长

差不多，它应该重复图像的中间部分并留下边缘。但我得到了新生儿绘画的结果。那么，是否有任何提示或解决方案？我做过研究，但没有一个包括我的愿望。

4

1 回答 1

1

问题是您用于边框的图像。您正在使用的图像正试图被分割成边框的每个部分。border-image并非旨在拍摄图像并将其排列在周边；它被设计为分成 9 个部分（想想井字游戏板），其中中心是您的div 区域。

切片图像

现在，图像的每个切片都试图应用于您各自的边界，其中的边可以重复，就像您的情况一样。CSS-Tricks有一个关于这个的不错的页面。

可能解决此问题的一种方法是自行编辑所需的图像，并通过设置自己的边框。复制粘贴和旋转。这样，您可以在 CSS 中使用它时切出适当的部分。

于 2016-06-26T01:43:10.590 回答