圓桌角落

Question

你可以幫我製作桌角嗎？我已經嘗試了簡單的border-radius，但是這只是將角落分開。這是由我的瀏覽器（Firefox）還是它的錯誤？ Jsfiddle - http://jsfiddle.net/vuys8eef/

Answer 1

您需要圓你的表的第一個和最後一排也是第一個和最後一個欄的角落。

事情是這樣的：

table tr:first-child th:first-child { 
    border-top-left-radius:10px 
    } 


table tr:first-child th:last-child { 
    border-top-right-radius:10px 
} 

table tr:last-child td:first-child { 
    border-bottom-left-radius:10px 
} 

table tr:last-child td:last-child { 
    border-bottom-right-radius:10px 
} 

你可以看到你更新fiddle

Answer 2

您正在將它應用於錯誤的元素，請改用它。

td, th{ 
    border-radius: 5px; 
} 

CODEPEN DEMO

Answer 3

你好你的代碼是好的，但你可以使用overflow:hidden表上隱藏的內容裏面。這是要做到這一點:)

例如JSFIDDLE