有關將此圓角框設計爲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的任何建議？

回答

相關問題