Question

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

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

#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。

我认为一个很好的选择可能会产生你想要的结果是：使用：之前和之后的样式可以比border-image更灵活，因为你可以定义：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:'';}

div上的不同边框图像

1 个答案: