因为我不确定这个是程序化的还是照片编辑的，所以我把它贴在这里。如果我不得不将其发布到其他地方，我深表歉意。
无论如何，我正在尝试使用 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>因此，我需要一些解决此问题的技巧。结果应该像这样(不完全一样，类似地):
请注意，不会定义宽度。可以延长
差不多吧，应该是重复图片的中间部分，留下边缘。但我得到了新生儿绘画的结果。那么，对此有什么提示或解决方案吗？我做过研究，但没有一个包含我的愿望。
最佳答案
问题是您用于边框的图像。您正在使用的图像正试图被分割成边框的每个部分。 border-image 的设计目的不是拍摄图像并将其沿周边排列；它被设计为分为 9 个部分(想想井字游戏板)，其中中心是您的 div 区域。
现在图像的每个切片都试图应用于您各自的边界，可以重复边，就像您的情况一样。 CSS-Tricks有一个关于此的好页面。
可能解决此问题的一种方法是自行编辑您想要的图像，并设置您自己的边框。复制粘贴和旋转。这样您就可以在 CSS 中使用它时切出适当的部分。
关于html - 我怎样才能正确地将它变成图像边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38033453/