div上的不同边框图像答案

【问题标题】：Different border images on a divdiv上的不同边框图像
【发布时间】：2017-11-19 01:04:34
【问题描述】：

我试图在同一个 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;
}

这可能吗？

【问题讨论】：

标签： css border border-image

【解决方案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:'';}

【讨论】：