有什么建議可以將此圓形框設計為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>