有关将此圆角框设计为CSS的任何建议？

我有这个圆形框的基本设计的CSS。下面粘贴了下面的内容。我试图添加一个蓝色边框，具有以下设计效果（请参阅下图）。首先这可能吗？如果是这样，任何建议将是伟大的..有关将此圆角框设计为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; 
}

来源

2017-09-30 OneUnited

只是'边界半径：5像素; border-top：2px纯蓝色;'适合我。这是在网站上吗？然后检查元素并查看其CSS。 – Xufox

您可以随时使用浏览器devtools查看样式是如何应用的。 – bhansa

不，它是在一个PSD文件。 – OneUnited

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>

来源

2017-10-01 03:52:18

有关将此圆角框设计为CSS的任何建议？

回答

相关问题