CSS實例：無懈可擊的CSS圓角技術！

2024-07-11 08:40:37

字體：大中小

來源：轉載

供稿：網友

　　要一個寬度不固定的框，事情變得有些復雜了。寬度不固定，就意味著這個框在水平和垂直方向都有足夠靈活的變化。

　　為什么說這更難一些呢？因為它需要對四張圖片的合適安置――每個圓角用一張。每個圓角都要獨立出來，以便框能夠在各個方向伸展。于是，四張圖片就意味著需要四個HTML對象來作為背景圖片的載體。

　　有一些實現辦法包括在樣式表中使用“生成內容”，即使用：before和:after偽類來為單獨的一個對象加上多張背景圖。這種方法的問題在于，在編寫本書的時候，Internet Explore(IE)還不支持“生成內容”，因些相當大數量的用戶就將無法看到圓角效果。

　　那怎么辦呢？假如一個固定的寬度已經預先確定，那就能很輕易地使用本章上一節中給出的那種方法，只背景圖片：一張用于顯示頂部的左右圓角，另一張顯示底部的左右圓角。預備好兩個HTML對象來做圖片載體并不是難題。可是當要求實現寬度不固定的框時，為了讓IE用戶也能看到一樣的設計效果，那就是加上額外的HTML代碼了。

　　圓角化

　　以下是Web標準的能人，也是本書的技術編輯Ethan Marcotte在解決Browse Happy網站所面臨這樣的問題時的做法（圖5-15）　http://browsehappy.com

　　圖5-15 Browse Happy是一個旨在幫助人們學習使用能取代Internet Explorer 在Web標準兼容的瀏覽器的網站

　　Ethan 用了一個圓角框來顯示用戶“已經切換使用”的某個兼容Web標準的瀏覽器，包括軟件名稱和圖標（圖5-16）。

　　圖5-16 這個圓角矩形框可以往任何方向擴展

　　Ethan 沒有給框設定固定的寬度，而使用了一種對前面提到過的“滑動門”技術的變通方法，使得當內容文字增多（或增大）時，框在水平和豎直方向都能伸縮（圖5-17）。

　　圖5-17 當文字變大時，框會在水平和豎直方向擴展，同時能保持圓角外形不變

　　我們現在來基于Ethan所使用的技術，構建另一個示例，它將是一個具有真正靈活性的框，能容納其內部的任何東西。

1.HTML代碼結構

　　如我先前提到過的，要實現一個在每個方向都靈活的框，面臨的不幸事實是我們需要添加額外的代碼。這些額外的代碼是獨立引用框的四角的圖片所必須的，這樣它才能根據需要在四個方向擴展。

　　注重：因為有些地方已經超過了本章要討論的范圍，所以為了讓例子簡單，這里對HTML代碼做了一些修改。本來，這個圓角矩形框是一個“定義列表”對象的一部分，該列表還包括有“切換人”的姓名以及其它信息。這是一個運用定義列表的聰明又巧妙的方法－－可以去查看http://browsehappy.com 的頁面源碼獲知更多細節。

　　要謹記，我們應該使用最少的HTML對象來作為背景圖片的載體，以下是我們創建的HTML代碼：

示例代碼 [www.CuoXIn.com]

上一篇：CSS布局教程：DIV CSS三列式布局的實現方法

下一篇：CSS布局實例：CSS標簽切換代碼實例教程