CSS圓角和漸變邊框

Question

我正在從設計師切割和切片psd布局的過程中。 該設計基於960網格系統，由多個框組成（頂部菜單為960px框，2個內容區為2 460px框，另一個內容設置選項為220像素和720像素等）。 所有這些盒子都是基於堅實的背景顏色（主體），但它們都有圓角和10像素的aprox邊框，一直是漸變色。

我正在考慮在這里采取什么是最好的路線，明智的，同時要記住它應該是當然有效的，良好的語義等。

任何想法/輸入？

Answer 1

我正在考慮在這里采取什么是最好的路線，明智的，同時要記住它應該是當然有效的，良好的語義等。

在這里采取的最佳途徑是使用純CSS3添加圓角和漸變。

優點：

• 不需要額外的，語義無意義的，糟糕的標記
• 無需圖像
• 易於實施和維護
• 能夠為不支持CSS3的舊瀏覽器優雅地降級

下行 s ：

• 在所有瀏覽器中都不起作用

這完全取決於你。

如果您希望您的網站在每個瀏覽器中看起來完全相同 ，則CSS3不是一個選項 - 您將不得不依賴難以維護的圖像和臃腫的標記。

但是，如果您不介意為舊瀏覽器的用戶提供略有不同但仍然不錯的設計，那么CSS3絕對是您的選擇。

---

'CSS3'漸變：

• http://webkit.org/blog/175/introducing-css-gradients/
• https://developer.mozilla.org/en/CSS/-moz-linear-gradient
• https://developer.mozilla.org/en/CSS/-moz-radial-gradient

CSS3圓角：

• http://www.css3.info/preview/rounded-border/

Answer 2

在IE6的所有web瀏覽器中以及僅使用 CSS的情況下，這無法完美運行。 您需要獲取JavaScript才能使其在所有瀏覽器中都能正常運行。 有jQuery插件可以動態地圓角，在所有的webbrowsers上工作，沒有任何額外的圖像或CSS。 我對這個jQuery Corner插件有很好的體驗。

Answer 3

我建議嘗試使用javascript庫DD_roundies（ http://www.dillerdesign.com/experiment/DD_roundies/ ）。 大多數瀏覽器已經支持CSS3中指定的圓角，而DD_roundies也增加了對不支持的瀏覽器（如IE）的支持。