如何在顶部创建一个圆角的盒子，但是底部的正常角落？

Question

我有以下代码：

<div class="box"> 
 <div class="title">
  <a>Title</a>
 </div>
 <div class="content">
  <a>Content</a>
 </div>
</div>

我想用CSS设置样式并成为以下结果：

但是，我不知道如何根据需要设置'标题'部分的样式。顶角应该是圆形的，但底部的角不应该是圆角。反之亦然“内容”部分。

我该怎么做？

Answer 1

您可以通过以下方式单独指定每个角落的半径：

border-top-left-radius: 24px;
border-top-right-radius: 24px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;

或将其合并为一个...

border-radius:24px 24px 0 0;

（值从左上角开始顺时针方向）

这里有一个生成器 - http://border-radius.com/ - 但它应该很容易在没有的情况下解决。

Answer 2

您可以使用此网站为圆角生成css。

http://border-radius.com

基本上你只需要指定你想要设置bodrer半径的角落，例如：      border-top-left-radius：5px