css - 带有图像的阴影线作为 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 和 :after 伪元素来执行此操作。 Read up on them here如果您不熟悉。

#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');
}