我想爲我的3列表(CSS表)創建圓角。我用:表中的圓角
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
在我的CSS,但我得到的是頂部圖像。我想讓它看起來像是底部的圖像。
有沒有什麼方式可以做到這一點?
我想爲我的3列表(CSS表)創建圓角。我用:表中的圓角
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
在我的CSS,但我得到的是頂部圖像。我想讓它看起來像是底部的圖像。
有沒有什麼方式可以做到這一點?
我建議圍繞整個表的<div>
,然後舍入div的角落
table { border-radius:10px; }
如果你想要做的每一行,使用CSS僞類:first-child
和:last-child
。
演示:http://jsfiddle.net/ThinkingStiff/R792K/
CSS:
table { border-spacing: 0; }
td {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
}
td:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
td:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid black;
}
HTML:
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
TD:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
TD:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
你能後的CSS和HTML? – fncomp 2012-02-27 00:34:00
謝謝你們!第n個孩子的技巧有幫助,並且這是有效的:第n個孩子(1){0} {0} {0} {0} {0} {0} -webkit-border-radius:10px 0 0 10px; border-radius:10px 0 0 10px; } n-child(3){ -moz-border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; border-radius:0 10px 10px 0; } – ahsu 2012-02-27 07:22:04
對於代碼縮進感到抱歉。 – ahsu 2012-02-27 07:23:48