阴影边框CSS

时间:2018-08-26 15:55:37

标签: css border shadow

如何在阴影上添加边框?

我不会做与此类似的事情 enter image description here

这是我的代码:

.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

1 个答案:

答案 0 :(得分: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>