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

时间:2014-06-28 20:54:51

标签: html css rounded-corners

我有以下代码:

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

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

Box with rounded corners

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

我该怎么做?

2 个答案:

答案 0 :(得分:2)

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

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/ - 但它应该很容易在没有的情况下解决。

答案 1 :(得分:0)

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

http://border-radius.com

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