CSS边框图像重复不工作

我有一个div，我正在尝试让边框重复一个图像。该图像显示在div的所有四个角中，但不会重复。有人能帮忙吗

HTML：

<div id="main" class="area"></div>

.area {
    position:absolute;
    top: 10%;
    left: 11%;
    width: 75px;
    height: 595px;
    border: solid;

    background-color:white;
    border:30px solid transparent;
    -webkit-border-image: url('media/playerAreaBorder.png');
    -webkit-border-image-repeat: repeat;

    vertical-align: middle;
    text-align: center;
    z-index: 5;
}

---

Sigma的答案是正确的，但您可能想看看如何使用边界图像切片。它将保持角落不变，仅拉伸边框图像的中间部分：

border-image-slice: 20 20 20 20;

你必须调整那里的20来匹配你的图像。它基本上将一幅图像分成9个区域，并拉伸非角区域。更多信息：

---

这适用于所有前缀，如moz、webkit和o:

一旦标准化，并且添加了对无前缀变体的支持， 将删除带前缀的属性

您仍然可以将它们包括在内，以便与较旧的浏览器版本兼容，但现在大多数浏览器都正确地支持CSS3

---

另外，请确保您的css文件和媒体文件夹位于同一文件夹中，否则您的url路径是错误的。

您是否尝试过简单地使用

边框图像

和

边框图像重复

，而不使用

-webkit

前缀？谢谢您的建议，让我意识到我需要在图像上实际设置9个区域。

border-image-slice: 20 20 20 20;