3.應(yīng)用樣式
因為不想給框賦予一個固定的寬度，并且還希望那些圓角總是緊挨著框中的內(nèi)容，所以浮動這個容器。將容器浮動能防止框自動變得和窗體（或者其他外圍容器對象）一樣寬。取而代之，框里面的內(nèi)容的寬度將決定框伸展多寬。
|
.container {
float: left;
color: #666;
background: url(img/rounded-right.gif) top right no-repeat;
}
|
注意我們是通過將圖片定位到對象的右上方來設(shè)置背景。
結(jié)果如圖9，rounded-right.gif 的上面部分顯示出來成為了整個容器的背景。
圖9 將圖片對齊到右上角顯示出了圓角效果
按照代碼順序，容器之后的對象就是第一個段落，我們使用了一個class="desc"（desc表示description）來標記它。然后我們將rounded-left.gif對齊到top和left，它的上半部分作左上圓角。這里我們還將<p>對象的默認margin和padding都高為0。稍后我們再根據(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é)果見圖10，左上圓角加好了。
圖10 將圖片對齊于左上角后，部分圓角效果出來了。
接下來，添加左下圓角，通過給第二個段落（我們給它標記了class="link"）指定rounded-left.gif的下面部分作為背景。這張圖的上面部分，我們之前通過將圖片對齊于top和left來顯示，現(xiàn)在則將它對齊于bottom和left，以顯示出下面的圓角。使用的間隔。第二個段落的三個側(cè)邊加了9px的padding,以此給內(nèi)容和框的邊界之間添加合適的間隔。第二個段落的左側(cè)也加了9px的padding.這個值和圖本身的寬度相同，以便讓"Indestructible!"鏈接文字后面的圓角能顯露出來。
|
.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é)果見圖11，四個圓角中有三個已經(jīng)被加在了正確位置，還剩最后一個了。
圖11 通過重用rounded-left.gif 但是對齊到下方，我們加上了第三個圓角
最后一張背景圖將附著在嵌套在第二個段落對象里面的<em>對象上。我們將rounded-right.gif對齊于bottom和right,顯示圖片的下面部分，另外好包括一定padding值，以便將框中的文字和邊線有均勻的間隔。大多數(shù)瀏覽器會將<em>包圍起來的文字顯示為斜體，所以我們還要覆蓋這個屬性，顯示正常的字體。
|
.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>是一個內(nèi)聯(lián)對象，不會自動擴展直至和父容器寬度相同，所以不能用于背景圖片的載體。但能過添加規(guī)則display: block;，將<em>變成一個塊級對象，強制讓它內(nèi)部的任何內(nèi)容都延伸到框的邊界，就能解決這個問題了。此外我們將框中的鏈接文字設(shè)置為橙色，并且比正常情況大——因為，不可破壞的鏈接就該是這樣子。
圖12是最后完成的框的效果，通過對齊兩張背景圖片，創(chuàng)建好了四個圓角。
圖12 這就是我們的成品，“牢不可破”的矩形框
4.牢不可破的特性
正如Browse Happy例子那樣的情況，請注意我們的圓角矩形框，根據(jù)其內(nèi)部的文字大小和內(nèi)容量的變化，能夠在所有方向自由擴展和收縮。真正的牢不可破（圖13）
圖13 不管有多大的文字還是多少內(nèi)容，框都可以擴大再擴大
