Question

我正试图建立一个类似于this design我found on Dribbble的网站。我决定合并弯曲的背景，但是我不确定如何实现这一点。我试着用background-color将整个背景设为div：＃04060F，但我不确定如何做到这一点，也不确定要填充到特定的填充和边框半径。

编辑：我得到this result

任何帮助将不胜感激谢谢

Answer 1

您的意思是：

div{
    border-radius: 5px;//or any length
}

这将为您提供想要的圆角。

Source

这是一个非常简单的示例：

div{
  height: 100px;
  background-color: blue;
  color: white;
  border-radius:5px;
}

<div class="rounded">
  Some text
</div>

Answer 2

这是我正在考虑查看您发布的图片的主要骨架。

.main {
    background-color: red;
    }
.badge{
    background-color: #efefef;
    border-radius: 20px;
    padding: 10px;
    
    }

<body class="main">
    <div class="badge">
        lorem<br>
        ipsum<br>
        dolor<br>
        sit<br>
        amen<br>
    </div>
</body>

给背景弯角

2 个答案: