CSS實例：無懈可擊的CSS圓角技術(shù)

2020-03-24 16:46:14

字體：大中小

供稿：網(wǎng)友

要一個寬度不固定的框，事情變得有些復(fù)雜了。寬度不固定，就意味著這個框在水平和垂直方向都有足夠靈活的變化。為什么說這更難一些呢？因為它需要對四張圖片的合適安置——每個圓角用一張。每個圓角都要獨立出來，以便框能夠在各個方向伸展。于是，四張圖片就意味著需要四個HTML對象來作為背景圖片的載體。有一些實現(xiàn)辦法包括在樣式表中使用“生成內(nèi)容”，即使用：before和:after偽類來為單獨的一個對象加上多張背景圖。這種方法的問題在于，在編寫本書的時候，Internet Explore(IE)還不支持“生成內(nèi)容”，因些相當(dāng)大數(shù)量的用戶就將無法看到圓角效果。那怎么辦呢？如果一個固定的寬度已經(jīng)預(yù)先確定，那就能很容易地使用本章上一節(jié)中給出的那種方法，只背景圖片：一張用于顯示頂部的左右圓角，另一張顯示底部的左右圓角。準備好兩個HTML對象來做圖片載體并不是難題。可是當(dāng)要求實現(xiàn)寬度不固定的框時，為了讓IE用戶也能看到一樣的設(shè)計效果，那就是加上額外的HTML代碼了。圓角化以下是Web標準的能人，也是本書的技術(shù)編輯Ethan Marcotte在解決Browse Happy網(wǎng)站所面臨這樣的問題時的做法（圖1）
Ethan 用了一個圓角框來顯示用戶“已經(jīng)切換使用”的某個兼容Web標準的瀏覽器，包括軟件名稱和圖標（圖2）。
圖2 這個圓角矩形框可以往任何方向擴展Ethan 沒有給框設(shè)定固定的寬度，而使用了一種對前面提到過的“滑動門”技術(shù)的變通方法，使得當(dāng)內(nèi)容文字增多（或增大）時，框在水平和豎直方向都能伸縮（圖3）。圖3 當(dāng)文字變大時，框會在水平和豎直方向擴展，同時能保持圓角形狀不變我們現(xiàn)在來基于Ethan所使用的技術(shù)，構(gòu)建另一個示例，它將是一個具有真正靈活性的框，能容納其內(nèi)部的任何東西。 1.HTML代碼結(jié)構(gòu) 如我先前提到過的，要實現(xiàn)一個在每個方向都靈活的框，面臨的不幸事實是我們需要添加額外的代碼。這些額外的代碼是獨立引用框的四角的圖片所必須的，這樣它才能根據(jù)需要在四個方向擴展。注意：因為有些地方已經(jīng)超過了本章要討論的范圍，所以為了讓例子簡單，這里對HTML代碼做了一些修改。本來，這個圓角矩形框是一個“定義列表”對象的一部分，該列表還包括有“切換人”的姓名以及其它信息。這是一個運用定義列表的聰明又巧妙的方法－可以去查看browsehappy.com 的頁面源碼獲知更多細節(jié)。要謹記，我們應(yīng)該使用最少的HTML對象來作為背景圖片的載體，以下是我們創(chuàng)建的HTML代碼：
This box is:
Indestructible!
一個作為容器的和緊隨其后的一個段落對象將作為前兩個載體。要湊足四個，我們將鏈接“Indestructible!" 用第二個段落對象以及（這里引入了一個有爭議的額外HTML對象）一個對象包圍起來。這里我使用是因為，從技術(shù)角度來講，我也打算讓它個鏈接表達一種強調(diào)的意思
同時，我悄悄地加上這個對象。這是我打算避免的事情，但是本例的情況下，我們需要這個第四個對象，以便引入創(chuàng)建圓角的必要背景圖片（圖4）。圖4 我們建的框的HTML代碼給我們提供了四個可用作背景圖片載體的對象結(jié)構(gòu)圖：2.圖片的策略雖然我們需要引用四次背景圖片（一個角一次），但可以借鑒Browse Happy網(wǎng)站所用的巧妙方案，它只需要用到兩張GIF圖片。我們先來看看圖片本身，就能理解這種方法了。如圖6所示，rounded-left.gif 是一張9個像素寬的GIF圖片，包括左上方和左下方圓角。我們將它創(chuàng)建得比預(yù)期的高很多，以便能容納大的內(nèi)容量
圖6 這張名為rounded-left.gif 的圖片包括了左上和左下圓角再如圖7，rounded-right.gif 是一張類似的圖片：它負責(zé)顯示右邊的上下兩個圖角，以及上，右和下邊線。這張圖片和rounded-left.gif 的高度相同，并且也比原本所需的尺寸要寬很多。圖7 rounded-right.gif 包括右上和右下圓角。這張圖還帶有框的上下邊線現(xiàn)在我們來定位這此圖片——并且這里就是精妙之處。圖片rounded-left.gif 將對齊于top以形成左上方的角（圖8），然后再次被使用，對齊于bottom，形成左下方的角。圖8 當(dāng)依附到頂邊時，除非框增到足夠大而被暴露，否則圖片下面的圓角是顯示不出來的只要框不會超過圖片高，那么那個沒有用上的，隱藏起來的圓角就不會顯示（（這也解釋了為什么我們開始時將圖片做得足夠高）。相應(yīng)的，對于rounded-right.gif，也會被使用兩次——作為右上和右下圓角。運用最好的判斷力來決定將這些圖片做得多高和多寬，當(dāng)然主要是取決于框內(nèi)部會放些什么類型的內(nèi)容。留出一些多作空間，以便應(yīng)付意料之外的文字大小和內(nèi)容量現(xiàn)在我們繼續(xù)操作，給HTML代碼應(yīng)用樣式，并且將所有的設(shè)計整合在一起
圖5 本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS實例：-nth-child和-nth-type-of的區(qū)別

下一篇：CSS高級技巧之圓角矩形上