固定寬度的圓角框
只需要兩個圖像：一個應用于框的頂部，一個應用于底部
<div class="box">
<h2>Lorem Ipsum</h2>
<p class="last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p>
</div>
.box {
width: 424px; //框的寬度必須與頂部和底部圖像的寬度一致
background: url(img/tile2.gif) repeat-y;//在框上設置重復顯示的背景圖像
}
.box h2 {
background: url(img/top2.gif) no-repeat left top;//頂部圖像應用于標題元素
padding-top: 20px;
}
.box .last {
background: url(img/bottom2.gif) no-repeat left bottom;//底部圖像應用于文字元素
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;//設置padding使得內容不碰到框的邊界
padding-right: 20px;
}
p {
margin: 0; /* fixes bug in IE */
}
隨著內容的增加，框垂直擴展（但不會水平擴展）
靈活的圓角框（滑動門技術）
不要使用一個圖像組成頂部和底部圖像，而是應用兩個相互重疊的圖像，隨之框尺寸的增加，大圖像就會有更多部分顯露出來，就實現了框擴展的效果------滑動門技術。一個圖像在另一個圖像上滑動，將它的一部分隱藏了起來，所以需要更多的圖像，則必須在標記中添加兩個額外的無語義元素。
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p>
</div>
</div>
</div>
.box {
width: 20em;//框的寬度以em為單位，框會隨著文本尺寸進行伸縮，也可以設置為%，框就會隨著瀏覽器窗口的尺寸進行伸縮
background: url(img/bottom-left.gif) no-repeat left bottom; //bottom-left.gif應用于主框div
}
.box-outer {
background: url(img/bottom-right.gif) no-repeat right bottom; //bottom-right.gif應用于外邊的div
padding-bottom: 1px;
}
.box-inner {
background: url(img/top-left.gif) no-repeat left top; //top-left.gif應用于內部的div
}
.box h2 {
background: url(img/top-right.gif) no-repeat right top; //top-right.gif應用于標題
padding-top: 1em;
}
.box h2, .box p {
padding-left: 1em;
padding-right: 1em;
}
字號增加，文本尺寸增加，圓角框會進行水平和垂直擴展
CSS3新特性
- 多個背景圖像：不是定義一個背景圖像，而是使用任意數量的圖像，用background-image定義要使用的所有圖像，background-repeat指定是否應該重復顯示，用background-position設置它們的位置。
<div class="box">
<h2>My Rounded Corner Box</h2>
<p>This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images. </p>
</div>
.box {
background-image: url(img/mtop-left.gif), url(img/mtop-right.gif), url(img/mbottom-left.gif), url(img/mbottom-right.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
- border-radius：設置邊框角的半徑。
- border-image：允許指定一個圖像作為元素的邊框，根據一些百分比規則把圖像劃分為9個單獨的部分，瀏覽器會自動的使用適當的部分作為邊框的對應部分---九分法縮放，有助于避免在調整圓角框大小時出現的失真。
<div class="box">
<h2>Yet Another Rounded Corner Box</h2>
<p>This is another rounded corner box......</p>
</div>
.box {
-webkit-border-image: url(img/corners.gif) 25% 25% 25% 25% / 25px round round;
}
在距離框的頂邊和底邊25%的地方畫兩條線，在距離左邊和右邊25%的地方畫兩條線，框就形成了9個部分。
border-image屬性會自動的把圖像的每個部分用于對應的邊框，因此，圖像的左上部分用作左上邊框，右邊中間部分用作右邊的邊框。25px是邊框的寬度，如果圖像不夠大，它們會自動平鋪，產生一個可擴展的框。
