div 上的不同边框图像

Question

我正在尝试在同一div上使用2个不同的边框图像：一个图像沿顶部重复，一个沿底部重复。

我可以显示底部边框图像。我也可以在顶部重复相同的边框图像，但是一旦我尝试使用底部边框图像或顶部边框图像，都不会显示：

#mainImage{
    border-bottom:8px solid #fff;
    border-bottom-image: url("http://local.vsjf.org/wp-content/themes/vsjf/images/vsjf_borders_sage_02.png") 7 repeat;
    border-top:8px solid transparent;
    border-top-image: url("http://local.vsjf.org/wp-content/themes/vsjf/images/vsjf_borders_white.png") 7 repeat;
    border-left:0px;
    border-right:0px;
}

这可能吗？

Answer 1

我从来没有遇到过使用边框图像，我想有一些标签很少用于CSS。

我认为一个可能会产生您想要的结果的好选择是使用 ：before 和 ：after 样式，它们比边框图像更灵活，因为您可以将 ：before 和 ：after 几乎定义为单独的元素，但它们是元素的一部分，默认情况下使其成为相对的。

#mainImage:before {background-image: url('/*url*/'); width: #px; height: #px; position: /*relative*/; content:''; }
#mainImage:after {background-image: url('/*url*/'); width: #px; height: #px; position: /*relative*/; content:'';}