html - 你能在 html 中只弯曲或环绕盒子的顶角吗？

Question

请问有没有一个代码可以只圆一个div的顶角？我正在尝试创建一张卡片，这是到目前为止的代码：

<div id="card1">
            <div id="card1i"></div>
           
</div>

这是CSS：

#card1 {
border-radius: 2%;
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.80);
  }

在卡片中，我想添加一个标题，它会有不同的背景，所以我添加了这个：

#card1i {
width: 250px;
height: 50px;
background-color: rgb(212, 202, 202);
  }

但是为标题添加第二个 div (card1i) 会删除原始卡片 (card1) 的略圆顶角。如果我尝试将边框半径添加到第二个 div (card1i)，这是具有不同背景颜色的标题，底角也会变成圆形，这是我不想要的。请问是一种只制作​​第二轮div的顶角的方法，还是有一种完全不同的方法来制作这张卡？

标签： htmlcss

Answer 1

您可以使用border-top-right-radius 和border-top-left-radius。在 w3schools 中探索边界半径，您可以获得许多其他 css 属性以供使用。