前端之家收集整理的这篇文章主要介绍了
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);
}
图像是这样的
@H_
502_12@最佳答案
您还需要指定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">
