html - 如何在垂直线上创建阴影效果

Question

我正在尝试确定是否有用于创建阴影垂直线的 css 方法，如本例所示

在此处输入图像描述

score 6 · Accepted Answer

只需使用box-shadow并使用它即可为您获得最佳结果。

.line {
    border-left: 2px solid black;
    height: 100px;
    display: inline-block;
    box-shadow: 2px 0px 2px #888;
}

score 3 · Accepted Answer

您可以为此使用盒子阴影

box-shadow: 1px 0px 0 blue, 2px 0px 0 red;

这将在元素右侧创建 2 条线，一条为红色，另一条为蓝色

但请记住，IE8 及更低版本不支持此功能，因此我建议对其中一行使用 css 边框。

使用边框和框阴影：

box-shadow: 1px 0px 0 red; border-right: 1px solid blue;

2 回答 2