css - 带有图像的阴影线作为垂直分隔符 btw DIV - 如何放置顶部和底部图像？

Question

我想在我的 DIV 之间有一条细的“阴影”线，作为分隔符。由于我希望阴影线更细且顶部和底部的不透明度更高，因此我创建了 3 个图像：中间阴影、顶部阴影和底部阴影。问题：我不知道如何将“顶部阴影”图像放置在“中间阴影”顶部和底部“底部”阴影（没有多个 DIV）。我附上了在烟花中完成的图像，您可以在其中看到阴影线的示例。许多 tks

div#content-center {
    overflow: hidden;
    background: khaki;
    background: transparent url('images/middle_shadow.png') repeat-y top left;
    padding: 0px 0px 0px 50px;
}

Answer 1

您也可以使用:before和:afterpsedo 元素来执行此操作。 如果您不熟悉，请在此处阅读它们。

#content-center{
    background:  url('images/shadow_repeat.png') center right repeat-y;
}

#content-center:before,
#content-center:after{
    content:'';
    display:inline-block;
    position: absolute;
    background-repeat: none;

    /*size these to be what you need*/
    height:100px;
    width:100px;
}

#content-center:before{
    top:0;
    background-image: url('images/shadow_top.png');
}

#content-center:after{
    bottom:0;
    background-image:url('images/shadow_bottom.png');
}

Answer 2

给出多个背景：

background:  url('images/middle_shadow.png') top left, url('images/middle_shadow2.png') center left,url('images/middle_shadow3.png') repeat-y bottom left;