如何在頂部創建一個圓角的盒子，但底部的正常角落？

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半徑，例如哪個角落： 邊框左上角的半徑：5像素