我正在從設計師切割和切片psd佈局的過程中。該設計基於960網格系統,由多個盒子組成(960px盒子用於頂層菜單,2個460px盒子用於2個內容區域,220pixel和720像素用於其他內容設置選項等)。所有這些盒子都基於堅實的背景色(主體),但它們都具有圓角以及一個10像素的aprox邊框,其周圍是漸變的。CSS圓角和漸變邊框
我考慮什麼會在這裏採取的最佳路線,HTML明智的,同時牢記,它應該ofcourse驗證,很好的語義等
任何想法/輸入?
我正在從設計師切割和切片psd佈局的過程中。該設計基於960網格系統,由多個盒子組成(960px盒子用於頂層菜單,2個460px盒子用於2個內容區域,220pixel和720像素用於其他內容設置選項等)。所有這些盒子都基於堅實的背景色(主體),但它們都具有圓角以及一個10像素的aprox邊框,其周圍是漸變的。CSS圓角和漸變邊框
我考慮什麼會在這裏採取的最佳路線,HTML明智的,同時牢記,它應該ofcourse驗證,很好的語義等
任何想法/輸入?
我考慮什麼會在這裏採取的最佳路線,HTML明智的,同時牢記,它應該ofcourse驗證,很好的語義等
這裏採取將最佳路線使用純CSS3來添加圓角和漸變。
優點:
下行
小號
:
這真的取決於你。
If you want your site to look exactly the same in every browser,CSS3不是一個選項 - 你將不得不依賴於難以維護的圖像和臃腫的標記。但是,如果您不介意爲舊版瀏覽器的用戶提供稍微不同但仍然不錯的設計,那麼CSS3絕對是一種可行的方式。
「CSS3」梯度:
CSS3圓角:
它需要完全符合IE +,7和8 + FF,Chromse和Safari - 所以CSS3不是一個選項,我不害怕:( 我想也許使用一些jQuery,但不知道負載效應方形角落,然後是一個短小的Falsh,然後在加載完成後角落變圓) – cJockey 2010-01-17 13:30:36
Firefox,Chrome和Safari將顯示圓角,Opera和IE7,8將忽略該規則並顯示方框。對於像圓角這樣的東西,我願意採取這種權衡。不可能讓你的網站在所有瀏覽器上看起來像素完美。 – ZippyV 2010-01-17 13:56:43
我會用這種方法去嗅探IE並使用JavaScript爲圓角提供圓角IE用戶。也許這一個 - http://www.methvin.com/jquery/jq-corner-demo.html – 2010-01-17 14:07:12
我建議嘗試JavaScript庫DD_roundies(http://www.dillerdesign.com/experiment/DD_roundies/)。大多數瀏覽器已經支持CSS3中指定的圓角,並且DD_roundies也支持不支持(比如IE)的瀏覽器。
這不會完美地在所有來自IE6的網頁瀏覽器上運行,並且只能在上運行 CSS。你需要抓住JavaScript來讓它在所有瀏覽器中都能正常工作。有jQuery插件可以在飛行中四處轉角,在所有網頁瀏覽器上工作,無需任何額外的圖像或CSS。我已與this jQuery Corner plugin有良好的經驗。
圖像可能會幫助這裏。此外,你還沒有真正問過一個具體的問題。 – 2010-01-17 13:16:47
我不想粗魯但是,你可以在doctype.com上得到更快的答案 – 2010-01-17 13:22:01
我在Google上找到的例子:http://www.ruzee.com/blog/2006/06/a-tutorial-for-rounded-邊角與 - 下拉陰影。唯一不同的是,我有一個圓角,因爲他有像頂部和底部一樣的波浪。但梯度/投影是相同的原理,我的需要是可變寬度。 我想我會問一個問題,但我可以再試一次;如何最好地實現上述功能。 – cJockey 2010-01-17 13:23:14