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

　　為什么說(shuō)這更難一些呢？因?yàn)樗枰獙?duì)四張圖片的合適安置――每個(gè)圓角用一張。每個(gè)圓角都要獨(dú)立出來(lái)，以便框能夠在各個(gè)方向伸展。于是，四張圖片就意味著需要四個(gè)HTML對(duì)象來(lái)作為背景圖片的載體。

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

　　那怎么辦呢？如果一個(gè)固定的寬度已經(jīng)預(yù)先確定，那就能很容易地使用本章上一節(jié)中給出的那種方法，只背景圖片：一張用于顯示頂部的左右圓角，另一張顯示底部的左右圓角。準(zhǔn)備好兩個(gè)HTML對(duì)象來(lái)做圖片載體并不是難題?？墒钱?dāng)要求實(shí)現(xiàn)寬度不固定的框時(shí)，為了讓IE用戶(hù)也能看到一樣的設(shè)計(jì)效果，那就是加上額外的HTML代碼了。

　　圓角化

　　以下是Web標(biāo)準(zhǔn)的能人，也是本書(shū)的技術(shù)編輯Ethan Marcotte在解決Browse Happy網(wǎng)站所面臨這樣的問(wèn)題時(shí)的做法（圖5-15）　http://browsehappy.com

　　圖5-15 Browse Happy是一個(gè)旨在幫助人們學(xué)習(xí)使用能取代Internet Explorer 在Web標(biāo)準(zhǔn)兼容的瀏覽器的網(wǎng)站

　　Ethan 用了一個(gè)圓角框來(lái)顯示用戶(hù)“已經(jīng)切換使用”的某個(gè)兼容Web標(biāo)準(zhǔn)的瀏覽器，包括軟件名稱(chēng)和圖標(biāo)（圖5-16）。

　　圖5-16 這個(gè)圓角矩形框可以往任何方向擴(kuò)展

　　Ethan 沒(méi)有給框設(shè)定固定的寬度，而使用了一種對(duì)前面提到過(guò)的“滑動(dòng)門(mén)”技術(shù)的變通方法，使得當(dāng)內(nèi)容文字增多（或增大）時(shí)，框在水平和豎直方向都能伸縮（圖5-17）。

　　圖5-17 當(dāng)文字變大時(shí)，框會(huì)在水平和豎直方向擴(kuò)展，同時(shí)能保持圓角形狀不變

　　我們現(xiàn)在來(lái)基于Ethan所使用的技術(shù)，構(gòu)建另一個(gè)示例，它將是一個(gè)具有真正靈活性的框，能容納其內(nèi)部的任何東西。

1.HTML代碼結(jié)構(gòu)

　　如我先前提到過(guò)的，要實(shí)現(xiàn)一個(gè)在每個(gè)方向都靈活的框，面臨的不幸事實(shí)是我們需要添加額外的代碼。這些額外的代碼是獨(dú)立引用框的四角的圖片所必須的，這樣它才能根據(jù)需要在四個(gè)方向擴(kuò)展。

　　注意：因?yàn)橛行┑胤揭呀?jīng)超過(guò)了本章要討論的范圍，所以為了讓例子簡(jiǎn)單，這里對(duì)HTML代碼做了一些修改。本來(lái)，這個(gè)圓角矩形框是一個(gè)“定義列表”對(duì)象的一部分，該列表還包括有“切換人”的姓名以及其它信息。這是一個(gè)運(yùn)用定義列表的聰明又巧妙的方法－－可以去查看http://browsehappy.com 的頁(yè)面源碼獲知更多細(xì)節(jié)。

　　要謹(jǐn)記，我們應(yīng)該使用最少的HTML對(duì)象來(lái)作為背景圖片的載體，以下是我們創(chuàng)建的HTML代碼： 

<div class=”container”>  
  <p class=”desc”>This box is:</p>  
  <p class=”link”><em><a href=”/browsers/firefox/”>Indestructible!</a></em></p>  
</div>
　　一個(gè)作為容器的<div>和緊隨其后的一個(gè)段落對(duì)象將作為前兩個(gè)載體。要湊足四個(gè)，我們將鏈接“Indestructible!” 用第二個(gè)段落對(duì)象以及（這里引入了一個(gè)有爭(zhēng)議的額外HTML對(duì)象）一個(gè)<em>對(duì)象包圍起來(lái)。這里我使用<em>是因?yàn)?，從技術(shù)角度來(lái)講，我也打算讓它個(gè)鏈接表達(dá)一種強(qiáng)調(diào)的意思。

　　同時(shí)，我悄悄地加上這個(gè)對(duì)象。這是我打算避免的事情，但是本例的情況下，我們需要這個(gè)第四個(gè)對(duì)象，以便引入創(chuàng)建圓角的必要背景圖片（圖5-18）。

　　圖5-18 我們建的框的HTML代碼給我們提供了四個(gè)可用作背景圖片載體的對(duì)象

　　結(jié)構(gòu)圖：

　　2.圖片的策略

　　雖然我們需要引用四次背景圖片（一個(gè)角一次），但可以借鑒Browse Happy網(wǎng)站所用的巧妙方案，它只需要用到兩張GIF圖片。我們先來(lái)看看圖片本身，就能理解這種方法了。

　　如圖5-19所示，rounded-left.gif 是一張9個(gè)像素寬的GIF圖片，包括左上方和左下方圓角。我們將它創(chuàng)建得比預(yù)期的高很多，以便能容納大的內(nèi)容量。

　　圖5-19 這張名為rounded-left.gif 的圖片包括了左上和左下圓角

　　再如圖5-20 ，rounded-right.gif 是一張類(lèi)似的圖片：它負(fù)責(zé)顯示右邊的上下兩個(gè)圖角，以及上，右和下邊線(xiàn)。這張圖片和rounded-left.gif 的高度相同，并且也比原本所需的尺寸要寬很多。

　　圖5-20 rounded-right.gif 包括右上和右下圓角。這張圖還帶有框的上下邊線(xiàn)

　　現(xiàn)在我們來(lái)定位這此圖片――并且這里就是精妙之處。圖片rounded-left.gif 將對(duì)齊于top以形成左上方的角（圖5-21），然后再次被使用，對(duì)齊于bottom，形成左下方的角。

　　圖5-21 當(dāng)依附到頂邊時(shí)，除非框增到足夠大而被暴露，否則圖片下面的圓角是顯示不出來(lái)的

　　只要框不會(huì)超過(guò)圖片高，那么那個(gè)沒(méi)有用上的，隱藏起來(lái)的圓角就不會(huì)顯示（（這也解釋了為什么我們開(kāi)始時(shí)將圖片做得足夠高）。相應(yīng)的，對(duì)于rounded-right.gif，也會(huì)被使用兩次――作為右上和右下圓角。

　　運(yùn)用最好的判斷力來(lái)決定將這些圖片做得多高和多寬，當(dāng)然主要是取決于框內(nèi)部會(huì)放些什么類(lèi)型的內(nèi)容。留出一些多作空間，以便應(yīng)付意料之外的文字大小和內(nèi)容量。

　　現(xiàn)在我們繼續(xù)操作，給HTML代碼應(yīng)用樣式，并且將所有的設(shè)計(jì)整合在一起。

　　3.應(yīng)用樣式 

　　因?yàn)椴幌虢o框賦予一個(gè)固定的寬度，并且還希望那些圓角總是緊挨著框中的內(nèi)容，所以浮動(dòng)這個(gè)容器。將容器浮動(dòng)能防止框自動(dòng)變得和窗體（或者其他外圍容器對(duì)象）一樣寬。取而代之，框里面的內(nèi)容的寬度將決定框伸展多寬。

.container {
  float: left;
  color: #666;
  }

　　除了將框左浮動(dòng)，我們還設(shè)定了框中文本的基本顏色：深灰色。

　　接下來(lái)，按照我們的策略將這兩張背景圖片放到HTML代碼中那四個(gè)可用的對(duì)象上。首先將右上角作為外圍主窗口的背景，將rounded-right.gif依附于其右上位置，使用圖片的上半部分。

.container {
  float: left;
  color: #666;
  background: url(img/rounded-right.gif) top right no-repeat;
  }

　　注意我們是通過(guò)將圖片定位到對(duì)象的右上方來(lái)設(shè)置背景。

　　結(jié)果如圖5-22，rounded-right.gif 的上面部分顯示出來(lái)成為了整個(gè)容器的背景。

　　圖5-22 將圖片對(duì)齊到右上角顯示出了圓角效果

　　按照代碼順序，容器之后的對(duì)象就是第一個(gè)段落，我們使用了一個(gè)class=”desc”（desc表示description）來(lái)標(biāo)記它。然后我們將rounded-left.gif對(duì)齊到top和left，它的上半部分作左上圓角。這里我們還將<p>對(duì)象的默認(rèn)margin和padding都高為0。稍后我們?cè)俑鶕?jù)需要加上全適的padding值。

.container {
  float: left;
  color: #666;
  background: url(img/rounded-right.gif) top right no-repeat;
  }
.desc {
  margin: 0;
  padding: 0;
  background: url(img/rounded-left.gif) top left no-repeat;
  }

　　加上第二張背景圖片后的結(jié)果見(jiàn)圖5-23，左上圓角加好了。

　　圖5-23 將圖片對(duì)齊于左上角后，部分圓角效果出來(lái)了。

　　接下來(lái)，添加左下圓角，通過(guò)給第二個(gè)段落（我們給它標(biāo)記了class=”link”）指定rounded-left.gif的下面部分作為背景。這張圖的上面部分，我們之前通過(guò)將圖片對(duì)齊于top和left來(lái)顯示，現(xiàn)在則將它對(duì)齊于bottom和left，以顯示出下面的圓角。使用的間隔。第二個(gè)段落的三個(gè)側(cè)邊加了9px的padding,以此給內(nèi)容和框的邊界之間添加合適的間隔。第二個(gè)段落的左側(cè)也加了9px的padding.這個(gè)值和圖本身的寬度相同，以便讓”Indestructible!”鏈接文字后面的圓角能顯露出來(lái)。

.container {
  float: left;
  color: #666;
  background: url(img/rounded-right.gif) top right no-repeat;
  }
.desc {
  margin: 0;
  padding: 9px 9px 0 9px;
  background: url(img/rounded-left.gif) top left no-repeat;
  }
.link {
  margin: 0;
  padding: 0 0 0 9px;
  background: url(img/rounded-left.gif) bottom left no-repeat;
  }

　　到目前為止的結(jié)果見(jiàn)圖5-24，四個(gè)圓角中有三個(gè)已經(jīng)被加在了正確位置，還剩最后一個(gè)了。

　　圖5-24 通過(guò)重用rounded-left.gif 但是對(duì)齊到下方，我們加上了第三個(gè)圓角

　　最后一張背景圖將附著在嵌套在第二個(gè)段落對(duì)象里面的<em>對(duì)象上。我們將rounded-right.gif對(duì)齊于bottom和right,顯示圖片的下面部分，另外好包括一定padding值，以便將框中的文字和邊線(xiàn)有均勻的間隔。大多數(shù)瀏覽器會(huì)將<em>包圍起來(lái)的文字顯示為斜體，所以我們還要覆蓋這個(gè)屬性，顯示正常的字體。

.container {
  float: left;
  color: #666;
  background: url(img/rounded-right.gif) top right no-repeat;
  }
.desc {
  margin: 0;
  padding: 9px 9px 0 9px;
  background: url(img/rounded-left.gif) top left no-repeat;
  }
.link {
  margin: 0;
  padding: 0 0 0 9px;
  background: url(img/rounded-left.gif) bottom left no-repeat;
  }
.link em {
  display: block;
  padding: 0 9px 9px 0;
  font-style: normal;
  background: url(img/rounded-right.gif) bottom right no-repeat;
  }
.container a {
  font-size: 130%;
  color: #e70;
  }

　　通常情況，<em>是一個(gè)內(nèi)聯(lián)對(duì)象，不會(huì)自動(dòng)擴(kuò)展直至和父容器寬度相同，所以不能用于背景圖片的載體。但能過(guò)添加規(guī)則display: block;，將<em>變成一個(gè)塊級(jí)對(duì)象，強(qiáng)制讓它內(nèi)部的任何內(nèi)容都延伸到框的邊界，就能解決這個(gè)問(wèn)題了。此外我們將框中的鏈接文字設(shè)置為橙色，并且比正常情況大――因?yàn)?，不可破壞的鏈接就該是這樣子。

　　圖5-25是最后完成的框的效果，通過(guò)對(duì)齊兩張背景圖片，創(chuàng)建好了四個(gè)圓角。

　　圖5-25 這就是我們的成品，“牢不可破”的矩形框

　　4.牢不可破的特性

　　正如Browse Happy例子那樣的情況，請(qǐng)注意我們的圓角矩形框，根據(jù)其內(nèi)部的文字大小和內(nèi)容量的變化，能夠在所有方向自由擴(kuò)展和收縮。真正的牢不可破（圖5-26）

　　圖5-26 不管有多大的文字還是多少內(nèi)容，框都可以擴(kuò)大再擴(kuò)大

給TA打賞

共{{data.count}}人

人已打賞

海報(bào)分享 {{postData.favorites_isset ? '已收藏' : '收藏'}} 舉報(bào)

CSS圓角技術(shù)