html - 创建具有多个边框的按钮

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>