创建具有多个边框的按钮

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>