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

前端之家收集整理的这篇文章主要介绍了CSS-Woocommerce-为产品添加边框图像 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试在每个产品周围添加边框图像,我已经在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);
}

图像是这样的

enter image description here

最佳答案
您还需要指定border-style和border-width(border-image仅替换border-color,而没有width和style,它分别默认为0,没有默认值):

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">
原文链接:https://www.f2er.com/css/530708.html

猜你在找的CSS相关文章