我正在創建一個主題，需要知道如何在每個單獨的部件周圍製作一個圓角框。我想改變每種顏色。我需要它圓潤並且充滿活力。我需要如果我添加更多的東西，它會拉伸或自動調整高度。我一遍又一遍地嘗試，但無法找到一個好方法。這裏是我的測試板每個單獨的部件周圍的wordpress圓角框

我現在所擁有的一個盒子。我需要四捨五入，這必須跨瀏覽器兼容。先謝謝你。

我

來源

2011-06-03 matthew moore

您支持哪些瀏覽器？具體來說，哪些瀏覽器*必須*您有圓角？ – matthewpavkov 2011-06-03 19:24:50

它必須是IE 7 - 9，FF和Chrome。 – 2011-06-03 19:42:54

那麼，你正在尋找一個複雜的CSS/html解決方案或腳本解決方案。爲了方便起見，我之前使用過這個功能，並且成功了 - http://css3pie.com/ – matthewpavkov 2011-06-03 19:48:29

您可以通過border-radius完成每個小部件的圓角。

在你的主題樣式表，添加：

.widget { 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
}

對於不同的背景顏色，你必須單獨針對每個插件，並在樣式表爲它們指定一種顏色。

並且爲了使IE6-8表現圓角，你可以使用使用「Curved Corners」。它不會必然驗證，但它會得到你想要的外觀。

IE9已經支持border-radius，但你必須正確地指定meta標籤：

<meta http-equiv="X-UA-Compatible" content="IE=9" />

//編輯

要使用Curved Corners，先下載most updated version here。然後你需要做的就是上傳border-radius.htc文件到你的服務器上，一般在你主題的css文件夾中。之後，無論你想有邊界半徑，你都可以將behavior: url(border-radius.htc)添加到CSS中。

我們的例子中，具有彎曲角border-radius.htc補充說：

.widget { 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    behavior: url(http://path.to.file/border-radius.htc); 
}

希望有所幫助。

來源

2011-06-03 19:26:40 joshmax

是的，我需要支持IE 6， - IE 8。我不明白如何使用彎曲的角落。我已經下載了它，但不明白我將如何鏈接它或任何東西 – 2011-06-03 19:42:16

我已經添加了MIME類型到我的服務器，也是這裏的CSS [code] #l_sidebar＃nav_menu-25 {border = radius; 10px; -moz-border-radius：10px; -webkit-border-radius：10px; 行爲：url（「http://wpcreations.net/wptest/border-radius.htc」）; 背景：＃EE1C25無; 顏色：＃EF000A; font-weight：bold; height：100px; } [/ code] – 2011-06-03 20:00:07

添加了更多關於Curved Corners''border-radius.htc'的信息來回答。往上看。 – joshmax 2011-06-03 20:11:11

如果你願意沒有在IE6圓角/ 7/8，然後單獨CSS會做到這一點：

.rounded_corners { 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
}

注意，-moz-和-webkit-性能支持較舊的Mozilla和Webkit瀏覽器。最新的瀏覽器，包括IE9，支持border-radius。

來源

2011-06-03 19:26:16 matthewpavkov

每個單獨的部件周圍的wordpress圓角框

回答

//編輯

相關問題