对 CSS 制作这个圆角盒设计有什么建议吗？答案

【问题标题】：Any suggestions for making this rounded box design to CSS?对 CSS 制作这个圆角盒设计有什么建议吗？
【发布时间】：2017-09-30 20:21:19
【问题描述】：

我有这个圆形框的基本设计的 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;
}

【问题讨论】：

只是border-radius: 5px; border-top: 2px solid blue; 对我来说很好。这是在网站上吗？只需检查元素并查看其 CSS。
您可以随时使用浏览器开发工具查看样式是如何应用的。
不，它在 PSD 文件中。

标签： html css psd

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：