Woocommerce

Question

我想在每个产品周围添加一个 border-image，我已经在 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-style和border-width（border-image只代替border-color，没有width和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">

Woocommerce - 为产品添加边框图像

Woocommerce - Add border image to products

css

styles

border-image