如何创建一个顶部有圆角但底部有普通角的盒子？答案

【问题标题】：How to create a box with rounded corners at the top, but normal corners at the bottom?如何创建一个顶部有圆角但底部有普通角的盒子？
【发布时间】：2014-06-29 05:01:26
【问题描述】：

我有以下代码：

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

我想用 CSS 设置样式，变成如下结果：

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

我该怎么做？

【问题讨论】：

Go go gadget google 我会说

标签： html css rounded-corners

【解决方案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/ - 但没有它应该很容易解决。

【讨论】：

【解决方案2】：

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

http://border-radius.com

基本上，您只需要指定要为其设置边界半径的角，例如：边框左上角半径：5px

【讨论】：