3.應(yīng)用樣式
因?yàn)椴幌虢o框賦予一個(gè)固定的寬度，并且還希望那些圓角總是緊挨著框中的內(nèi)容，所以浮動(dòng)這個(gè)容器。將容器浮動(dòng)能防止框自動(dòng)變得和窗體（或者其他外圍容器對(duì)象）一樣寬。取而代之，框里面的內(nèi)容的寬度將決定框伸展多寬。
|
.container {
float: left;
color: #666;
background: url(img/rounded-right.gif) top right no-repeat;
}
|
注意我們是通過(guò)將圖片定位到對(duì)象的右上方來(lái)設(shè)置背景。
結(jié)果如圖9，rounded-right.gif 的上面部分顯示出來(lái)成為了整個(gè)容器的背景。
圖9 將圖片對(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)圖10，左上圓角加好了。
圖10 將圖片對(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)圖11，四個(gè)圓角中有三個(gè)已經(jīng)被加在了正確位置，還剩最后一個(gè)了。
圖11 通過(guò)重用rounded-left.gif 但是對(duì)齊到下方，我們加上了第三個(gè)圓角
最后一張背景圖將附著在嵌套在第二個(gè)段落對(duì)象里面的<em>對(duì)象上。我們將rounded-right.gif對(duì)齊于bottom和right,顯示圖片的下面部分，另外好包括一定padding值，以便將框中的文字和邊線有均勻的間隔。大多數(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)椋豢善茐牡逆溄泳驮撌沁@樣子。
圖12是最后完成的框的效果，通過(guò)對(duì)齊兩張背景圖片，創(chuàng)建好了四個(gè)圓角。
圖12 這就是我們的成品，“牢不可破”的矩形框
4.牢不可破的特性
正如Browse Happy例子那樣的情況，請(qǐng)注意我們的圓角矩形框，根據(jù)其內(nèi)部的文字大小和內(nèi)容量的變化，能夠在所有方向自由擴(kuò)展和收縮。真正的牢不可破（圖13）
圖13 不管有多大的文字還是多少內(nèi)容，框都可以擴(kuò)大再擴(kuò)大
本新聞共
2頁(yè),當(dāng)前在第
2頁(yè)
1 2 
