我怎样才能制作这个边框

Question

有人可以帮我制作这个代码吗？我想把它作为网页中的方形边框。这就像边界内的边界。

Answer 1

如果我对您的问题的理解是正确的，您可以使用插入box-shadow执行此操作，如下面的代码段所示。一个阴影（红色的阴影）具有模糊半径，因为它似乎从红色变为透明而另一个没有模糊半径，因为它似乎一直是实线。

.fancy-border {
  height: 200px;
  width: 200px;
  border: 10px solid rgb(0, 53, 107);
  padding: 20px;
  box-shadow: inset 0px 0px 10px 10px rgb(252, 1, 2), inset 0px 0px 0px 20px rgb(0, 53, 107);
}

<div class='fancy-border'>Some content</div>

如果您只想要外部蓝色边框和内部红色边框（内部没有额外的蓝色边框），那么可以按如下所示完成：

如果我对您的问题的理解是正确的，您可以使用插入box-shadow执行此操作，如下面的代码段所示。一个阴影（红色的阴影）具有模糊半径，因为它似乎从红色变为透明而另一个没有模糊半径，因为它似乎一直是实线。

.fancy-border {
  height: 200px;
  width: 200px;
  border: 10px solid rgb(0, 53, 107);
  padding: 20px;
  box-shadow: inset 0px 0px 10px 10px rgb(252, 1, 2);
  background: rgb(0, 53, 107); /* remove if this also is not needed */
}

<div class='fancy-border'>Some content</div>