2010-01-17 186 views
4

我正在從設計師切割和切片psd佈局的過程中。該設計基於960網格系統,由多個盒子組成(960px盒子用於頂層菜單,2個460px盒子用於2個內容區域,220pixel和720像素用於其他內容設置選項等)。所有這些盒子都基於堅實的背景色(主體),但它們都具有圓角以及一個10像素的aprox邊框,其周圍是漸變的。CSS圓角和漸變邊框

我考慮什麼會在這裏採取的最佳路線,HTML明智的,同時牢記,它應該ofcourse驗證,很好的語義等

任何想法/輸入?

+1

圖像可能會幫助這裏。此外,你還沒有真正問過一個具體的問題。 – 2010-01-17 13:16:47

+0

我不想粗魯但是,你可以在doctype.com上得到更快的答案 – 2010-01-17 13:22:01

+0

我在Google上找到的例子:http://www.ruzee.com/blog/2006/06/a-tutorial-for-rounded-邊角與 - 下拉陰影。唯一不同的是,我有一個圓角,因爲他有像頂部和底部一樣的波浪。但梯度/投影是相同的原理,我的需要是可變寬度。 我想我會問一個問題,但我可以再試一次;如何最好地實現上述功能。 – cJockey 2010-01-17 13:23:14

回答

7

我考慮什麼會在這裏採取的最佳路線,HTML明智的,同時牢記,它應該ofcourse驗證,很好的語義等

這裏採取將最佳路線使用純CSS3來添加圓角和漸變。

優點:

  • 沒有額外的,語義上無意義的,蹩腳的標記需要
  • 沒有圖像所需
  • 易於實現和維護
  • 能力正常降級的舊版本瀏覽器不要」 t支持CSS3

下行 小號

  • 不中每一個瀏覽器工作,並能

這真的取決於你。

If you want your site to look exactly the same in every browser,CSS3不是一個選項 - 你將不得不依賴於難以維護的圖像和臃腫的標記。但是,如果您不介意爲舊版瀏覽器的用戶提供稍微不同但仍然不錯的設計,那麼CSS3絕對是一種可行的方式。


「CSS3」梯度:

CSS3圓角:

+0

它需要完全符合IE +,7和8 + FF,Chromse和Safari - 所以CSS3不是一個選項,我不害怕:( 我想也許使用一些jQuery,但不知道負載效應方形角落,然後是一個短小的Falsh,然後在加載完成後角落變圓) – cJockey 2010-01-17 13:30:36

+2

Firefox,Chrome和Safari將顯示圓角,Opera和IE7,8將忽略該規則並顯示方框。對於像圓角這樣的東西,我願意採取這種權衡。不可能讓你的網站在所有瀏覽器上看起來像素完美。 – ZippyV 2010-01-17 13:56:43

+0

我會用這種方法去嗅探IE並使用JavaScript爲圓角提供圓角IE用戶。也許這一個 - http://www.methvin.com/jquery/jq-corner-demo.html – 2010-01-17 14:07:12

1

這不會完美地在所有來自IE6的網頁瀏覽器上運行,並且只能在上運行 CSS。你需要抓住JavaScript來讓它在所有瀏覽器中都能正常工作。有jQuery插件可以在飛行中四處轉角,在所有網頁瀏覽器上工作,無需任何額外的圖像或CSS。我已與this jQuery Corner plugin有良好的經驗。