css - Woocommerce - 为产品添加边框图像

Question

我正在尝试在每个产品周围添加边框图像，我在 illustrator 中设计了图像，但无法显示。src 等是正确的。

.woocommerce ul.products li.product, .woocommerce-page ul.products 
li.product {
    border-image-slice: 50 56 27 58;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source:url(bkg-img.png);
}

图像是这样的

Answer 1

您还需要指定border-styleand border-width（border-image只替换border-color和不带widthand style，默认分别为0, none）：

img {
  border: 20px solid;
  border-image-slice: 50 56 27 58;
  border-image-width: 20px;
  border-image-outset: 0;
  border-image-repeat: stretch stretch;
  border-image-source: url('https://i.stack.imgur.com/xAphp.png');
}

<img src="https://via.placeholder.com/135">

<img src="https://via.placeholder.com/400x135">