有什么建议可以将此圆形框设计为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

该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>