如何给边框阴影

Question

如何给边框加上阴影？

CSS代码：

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

现在可以给这个边界加阴影了吗？

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>

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>