阴影边框CSS

Question

如何在阴影上添加边框？

我不会做与此类似的事情

这是我的代码：

.btn {
  margin: 10px;
}

.btn:active span {
  transform: translate(0, 6px);
  box-shadow: 0 -5px 0 blue;
  transition: 0.3s;
}

.btn {
  display: inline-block;
  border-radius: 6px;
  box-shadow: 0 6px 0 blue;
}

.btn span {
  display: inline-block;
  color:white;
  padding: 10px  20px;
  background: #3194c6;
  border-radius: 4px;
  transition: .2s ease-in-out;
}

这是我的jsfiddle

Answer 1

使用多个阴影：

.btn {
  margin:10px;
  display: inline-block;
  border-radius: 6px;
  box-shadow: 0px 0px 0px 2px #000,
              0 6px 0 red,
              0px 6px 0px 2px #000,
              0px 0px 0px 2px #000;
}

.btn span {
  display: inline-block;
  color: white;
  padding: 10px 20px;
  background: #3194c6;
  border-radius: 4px;
  transition: .2s ease-in-out;
}

<a href="#" class="btn"><span>Press this!</span></a>