有什么建议使这个圆形框设计为CSS？

Question

我有这个圆形框的基本设计的CSS。我已粘贴下面的内容。我正在尝试添加具有以下设计效果的蓝色边框（请参见下图）。首先这可能吗？如果是这样，任何建议都会很棒..

我尝试只添加一个顶部边框，但它并没有给我正在寻找的效果。

.contentbox {
  border-style: solid;
  border-width: 2px;
  border-color: rgb(54, 81, 143);
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  opacity: 0.2;
  box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
  position: absolute;
  left: 190px;
  top: 324px;
  width: 100%;
  height: 524px;
  z-index: 118;
}

Answer 1

This Codepen使用不同的边框宽度来创建与示例中所示相似的效果。
祝你好运，我希望这会有所帮助。

html, body {
  perspective: 100px;
  height: 100%;
  width: 100%;
  margin: 0;
}
div {
  margin: 20px;
  border-style: solid;
  border-width: 4px 1px 1px 1px;
  border-color: rgb(54, 81, 143);
  border-top-color: blue;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
  position: absolute;
  width: 100px;
  height: 100px;
}

<div></div>