Question

由于我不确定这是编程方式还是照片编辑，我在这里发布。如果我不得不在其他地方发帖，我道歉。

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

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

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

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

Answer 1

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

现在，图片的每个切片都会尝试应用到您的相应边框，这样可以重复边，就像您的情况一样。 CSS-Tricks有一个很好的页面。

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

如何将其正确地制作成图像边框？

1 个答案: