如何给边框添加阴影

Question

如何给边框阴影？

CSS代码：

 p{
  border-right:2px solid black;
  line-height:4em
}

现在有可能给这个边界加上阴影吗？

原文由 eylay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

取决于你想要实现什么类型的阴影

动态生成边框并添加阴影

 p {
    line-height:4em;
    position: relative;
}

p::after {
    content: ' ';
    width: 2px;
    height: 4em;
    background-color: black;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 3px 3px 2px red;
}

 <p>Stack Overflow</p>

右侧的简单偏移阴影

 p {
    border-right:2px solid black;
    line-height:4em;
    box-shadow: 2px 0px red;
}

 <p>Stack overflow</p>

原文由 totymedli 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以用 box-shadow

 p {
  border-right: 2px solid black;
  line-height:4em;
  display: inline-block;
  -webkit-box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
  -moz-box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
  box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
}

 <p>Lorem ipsum dolor.</p>

或尝试 :after 和 linear-gradient

 p {
  border-right: 2px solid black;
  line-height:4em;
  display: inline-block;
  position: relative;
}

p:before {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: -5px;
  width: 5px;
  height: 100%;
  background: linear-gradient(transparent, #aaa, transparent);
  content: '';
}

 <p>Lorem ipsum dolor.</p>

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议