如何使用CSS或JavaScript創建圓角

Question

重復：

使用CSS創建圓角的最佳方法是什么？

我想創建一個帶有一些列的表，其中每個列都有一個圓角。

我不是CSS專家。 我認為js解決方案也應該很好。

如果有人做過..如果他們能幫助我，我將非常感謝。

我沒有使用Jquery。

謝謝，本

Answer 1

這是使用CSS的25種不同方式的鏈接：

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

這是一個漂亮的角落的鏈接，可使用javascript做到這一點：

http://www.html.it/articoli/nifty/index.html

Answer 2

在野生動物園，chrome（我想像），firefox 2+和konquerer（可能還有其他）中，您可以在CSS中使用“邊界半徑”來實現。 由於尚未正式納入規范，因此請使用供應商特定的前綴

例

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;

}

JS解決方案通常會增加一堆小div，使其看起來很圓，或者使用邊框和負邊距制作1px的缺口角。

IMO，CSS方法更好，因為它看起來很酷，很容易，並且會在IE中正常降級。 當然，這僅是客戶端未在IE中強制實施的情況。

Answer 3

這是我在幾個項目上正在做的事情：

對於基於Firefox和WebKit的瀏覽器（盡管要注意Chrome在此方面存在錯誤），對於本地圓角，請使用基於CSS邊框半徑的樣式：

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

這些還允許您為每個角指定值，只是請注意語法略有不同：

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

這些基於CSS3 border-radius樣式，有關此處的不同定義的更多信息： CSS：border-radius和-moz-border-radiuss （請注意，該文章有些陳舊 ，但仍然適用）。 我還沒有對此進行研究，但是我不知道有任何實現本機CSS3邊界半徑的瀏覽器（如果我輸入錯了，請給我指正）。

然后對於IE，我使用DD_roundies ，這是我見過的最優雅的JavaScript解決方案，並使用本機IE VML來解決問題。

如果用戶使用的是不帶JavaScript的IE或正在使用Opera，那么倒霉的是他們不會四舍五入，但是按照漸進增強的精神，這永遠不是問題。

Answer 4

如果您想堅持使用CSS，最好的方法已經陳述如下：

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

但是，您正在疏遠Internet Explorer的市場份額。

為了解決這個問題，將為您的div創建圓形的圖像。 http://www.roundedcornr.com/具有圖像生成器和示例代碼。

一個JavaScript替代方案是DD_Roundies之類的jQuery插件。 到目前為止，使用DD_Roundies插件是最簡單的方法。 http://www.dillerdesign.com/experiment/DD_roundies/您只需告訴div您想要多大的半徑以及在哪個角上，它將自行完成所有魔術（顏色，漸變）。

Answer 5

我大多數時候都看到這涉及使用CSS進行巧妙的圖像處理。 表格和其他此類小部件是由瀏覽器定義的，因此您不能僅僅使用它們並保證每個人都能看到相同的東西。

http://designworkx.co.nz/

有一個即將推出的簡單頁面，這是一個很好的簡單示例。

Answer 6

HTML化妝標簽，CSS和javascript是一種更靈活的方法。

此鏈接告訴算法生成任意半徑的圓角css。 http://www.pagecolumn.com/webparts/rounded_corners.htm