Question

我试图让<div class="post">元素具有不同的顶部和底部边框图像（以给出页面中某种口袋的印象）。我可以使用以下内容摆脱边框：

.post {
    width: 980px;
    border-image: url(./images/border-post-top.png);
    border-width: 23px;
    border-left-width: 0px !important; 
    border-right-width: 0px !important;
}

但是，据我所知，没有什么可以让我指定不同的顶部和底部边框。如果<div>底部的边框旋转180度或在x轴上反射，这不会有问题，但我也不能这样做。有没有解决这个问题的方法，或者我需要在post div元素的开头和结尾使用两个单独的<img>元素来实现这个目标吗？

Answer 1

将两个“部分”放入同一图像中，然后使用border-image-slice确定显示在哪里的内容。

此属性允许您将图像切割成九个“区域”，其中八个用于边框及其“角”，第九个用于填充元素的背景（后者仅在关键字{已设置{1}}。

Answer 2

答案包括mixin或whatnot

的供应商前缀

.post {
    border-style: solid;
    border-width: 23px 0 23px 0;
    -moz-border-image: url(img/border-full.png) repeat;
    -webkit-border-image: url(img/border-full.png) repeat;
    -o-border-image: url(img/border-full.png) repeat;
    border-image: url(img/border-full.png) repeat;
    -moz-border-image-slice: 23 0 23 0;
    -webkit-border-image-slice: 23 0 23 0;
    -o-border-image-slice: 23 0 23 0;
    border-image-slice: 23 0 23 0;
    -moz-border-image-width: 1 0 1 0;
    -webkit-border-image-width: 1 0 1 0;
    -o-border-image-width: 1 0 1 0;
    border-image-width: 1 0 1 0;
}

顶部和底部有不同的边框图像

2 个答案: