我怎样才能正确地将它变成图像边框？

Question

因为我不确定这个是程序化的还是照片编辑的，所以我post在这里。如果我不得不 post 在其他地方这样做，我深表歉意。

无论如何，我正在尝试使用 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

所以，我需要一些解决此问题的技巧。结果应该像这样 something（不完全一样）：

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

差不多吧，应该是把图片的中间部分重复，剩下边缘。但我得到了新生儿绘画的结果。那么，对此有什么提示或解决方案吗？我做了研究，但 none 包含了我的愿望。

Answer 1

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

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

可能解决此问题的一种方法是自行编辑您想要的图像，并设置您自己的边框。复制粘贴和旋转。这样您就可以在 CSS.

中使用它时切出适当的部分

我怎样才能正确地将它变成图像边框？

How can I properly make this into an image border?

html

css

border-image