具有多个边框的创建按钮

Question

我需要为网站设计创建这种按钮：

问题是我真的不知道如何使用CSS来实现这一目标。我当时在考虑边框和阴影，但找不到合适的方法。

欢迎您的帮助！

谢谢

Answer 1

是的，您可以使用方框阴影，如所附代码所示

如评论中所指出，如果需要透明背景，这将无法正常工作

div {
  display: inline-block;
  padding: 10px 7px;
  color: black;
  background-color: white;
  border: 1px solid black;
  box-shadow: 0 0 0 2px green,
              6px 6px 0 0 white,
              6px 6px 0 2px blue,
              12px 12px 0 0 white,
              12px 12px 0 2px red;
}

<div> more about us </div>

Answer 2

接近您想要的东西：

.extra-bordered {
  background: transparent;
  border: 1px solid black;
  box-shadow: 0px 0px 0 1px white, 0px 0px 0 3px black, 4px 4px 0 2px white, 4px 4px 0 3px black;
}

<button class="extra-bordered">More About US</button>

是的，这对 body 的背景图片来说不是很好。如果您无意使用图片，也可以尝试使用border-image属性来实现此目的。