调整CSS阴影方向：将.hr-line的box-shadow改为向上（反向效果）

你只需要调整box-shadow的垂直偏移值，把正数改为负数，就能实现向上的阴影效果：

原代码里的阴影设置是：

box-shadow: 0 20px 20px -20px;

修改为：

box-shadow: 0 -20px 20px -20px;

简单说明： #

box-shadow的第二个参数是垂直偏移量，正数代表阴影向下延伸，改成负数后阴影就会向上扩散，其余参数保持不变，就能得到你需要的反向阴影样式。

完整修改后的CSS代码：

.hr-line {
margin: -30px auto 10px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid;
box-shadow: 0 -20px 20px -20px;
width: 95%;
}

内容的提问来源于stack exchange，提问作者David