用 CSS3 實現未來的 Web

2022-08-27 17:27:14 字數 3516 閱讀 3345

css 3 + html 5 是未來的 web,它們都還沒有正式到來,雖然不少瀏覽器已經開始對它們提供部分支援。本文介紹了 5 個 css3 技巧,可以幫你實現未來的 web,不過,這些技術不應該用在正式的客戶專案,它們更適合你的個人部落格站點,web 設計社群,或者不會有客戶向你投訴的場合。

css3 新功能中最常用的一項是圓角效果,標準 html 方塊物件是90度方角的,css3 可以幫你實現圓角。

-moz-border-radius: 20px;  

-webkit-border-radius: 20px;  

border-radius: 20px;  

甚至單個角也可以實現圓角,不過 mozilla 和 webkit 的語法稍有不同。

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

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

-moz-border-radius-bottomleft: 10px;  

-moz-border-radius-bottomright: 10px;  

-webkit-border-top-rightright-radius: 20px;  

-webkit-border-top-left-radius: 20px;  

-webkit-border-bottom-left-radius: 10px;  

-webkit-border-bottom-rightright-radius: 10px; 

所支援的瀏覽器:firefox, safari , chrome

用例: twitter. 

請參閱:

顧名思義,圖形化邊界就是允許使用作為物件的邊界,語法如下:

border: 5px solid #cccccc;  

-webkit-border-image: url(/images/border-image.png) 5 repeat;  

-moz-border-image: url(/images/border-image.png) 5 repeat;  

border-image: url(/images/border-image.png) 5 repeat; 

border-bottom-rightright-image  

border-bottom-image  

border-bottom-left-image  

border-left-image  

border-top-left-image  

border-top-image  

border-top-rightright-image  

border-right-image  

支援的瀏覽器: firefox 3.1, safari , chrome.

用例: blog.spoongraphics.

請參考:

陰影效果曾讓 web 設計師既愛又恨,現在,有了 css3,你不再需要 photoshop,已經有**在使用這個功能了,如 24 ways website.

-webkit-box-shadow: 10px 10px 25px #ccc;  

-moz-box-shadow: 10px 10px 25px #ccc;  

box-shadow: 10px 10px 25px #ccc; 

前兩個屬性設定陰影的 x / y 位移,這裡分別是 10px,第3個屬性定義陰影的虛化程度,最後乙個設定陰影的顏色。文字陰影也可以這樣設定:

text-shadow: 2px 2px 5px #ccc; 

支援的瀏覽器:firefox 3.1, safari, chrome (只支援 box 陰影) ,opera (只支援文字陰影).

前3個數字表示紅綠藍三色的值,最後乙個值代表透明度,另外,我們還可以使用 opacity 實現透明度(目前的燈箱效果多使用該技巧 - 譯者)

用例: 24 ways.

請參考:

目前,web 設計中的透明效果主要靠 png 實現(但在 ie 瀏覽器支援得並不好 - 譯者),在 css3,可以直接實現透明效果。

rgba(200, 54, 54, 0.5);  

background: rgba(200, 54, 54, 0.5);  

color: rgba(200, 54, 54, 0.5); 

color: #000;  

opacity: 0.5; 

支援的瀏覽器: firefox, safari, chrome, opera (opacity) 以及 ie7 (opacity, with fixes).

用例: 24 ways (rgba).

請參考:

web 設計中有幾種字型是比較安全的,如 arial,helvetica, verdana, georgia, comic sans (中文的,一般來說宋體是唯一安全的 - 譯者),現在,使用 css3 的 @font-face 可以自己指定字型,不過因為牽扯到版權問題,實際能用的字型也是有限的 (另外,體積龐大的中文字型也是乙個不好解決的問題 - 譯者)。

語法如下:

@font-face  

支援的瀏覽器: firefox 3.1, safari, opera 10 and ie7 (需要一番周折,如果你不怕麻煩,可以在 ie 實現這個功能,請參考: make font-face work in ie )

用例: taptaptap.

請參閱:

firefox 目前擁有大量使用者基礎,另外,即將推出的 firefox 3.1 支援不少 css3 效果,因為 firefox 使用者的公升級積極性很高,因此,會有不少使用者可以提前體驗 css3 的新功能。

google chrome 今年剛剛發布,它基於 webkit 引擎,因此和 safari 很相似,因為 safari 主要用於 mac 市場,chrome 可以正好彌補 windows 市場的空缺。

根據統計資料,2023年11月止,44.2% 的使用者使用 firefox, 3.1% 使用 chrome, 2.7% 使用 safari,意味著 css3 的部分功能已經可以支援近半 internet 使用者,而在 web 設計圈子,這個比例可能更高,大約有 73.6% (blog.spoongraphics 提供的資料)

用CSS3實現未來的Web

css 3 html 5 是未來的 web,它們都還沒有正式到來,雖然不少瀏覽器已經開始對它們提供部分支援。本文介紹了 5 個 css3 技巧,可以幫你實現未來的 web,不過,這些技術不應該用在正式的客戶專案,它們更適合你的個人部落格站點,web 設計社群,或者不會有客戶向你投訴的場合。css3 ...

用CSS3實現鐘錶效果

var olist document.getelementbyid list 獲取到刻度 var ocss document.getelementbyid css var ohour document.getelementbyid hour 獲取時針 var omin document.getele...

用CSS3實現放大效果

任務描述 本關任務 用css3放大效果。效果如下 相關知識 為了完成本關任務,你需要掌握 1.transform屬性,2.transition屬性。transform屬性 下面是基本的html結構,效果如下 現在需要基於中心放大1.2倍。效果如下 該如何實現呢?咱們先實現放大1.2倍,用到了 tra...