固定寬度的圓角框
只需要兩個(gè)圖像：一個(gè)應(yīng)用于框的頂部盗舰，一個(gè)應(yīng)用于底部
<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;//在框上設(shè)置重復(fù)顯示的背景圖像
}
.box h2 {
background: url(img/top2.gif) no-repeat left top;//頂部圖像應(yīng)用于標(biāo)題元素
padding-top: 20px;
}
.box .last {
background: url(img/bottom2.gif) no-repeat left bottom;//底部圖像應(yīng)用于文字元素
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;//設(shè)置padding使得內(nèi)容不碰到框的邊界
padding-right: 20px;
}
p {
margin: 0; /* fixes bug in IE */
}
隨著內(nèi)容的增加，框垂直擴(kuò)展（但不會(huì)水平擴(kuò)展）
靈活的圓角框（滑動(dòng)門技術(shù)）
不要使用一個(gè)圖像組成頂部和底部圖像桂躏，而是應(yīng)用兩個(gè)相互重疊的圖像钻趋，隨之框尺寸的增加，大圖像就會(huì)有更多部分顯露出來剂习，就實(shí)現(xiàn)了框擴(kuò)展的效果------滑動(dòng)門技術(shù)蛮位。一個(gè)圖像在另一個(gè)圖像上滑動(dòng)，將它的一部分隱藏了起來鳞绕，所以需要更多的圖像失仁，則必須在標(biāo)記中添加兩個(gè)額外的無語義元素。
<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為單位们何，框會(huì)隨著文本尺寸進(jìn)行伸縮萄焦，也可以設(shè)置為%，框就會(huì)隨著瀏覽器窗口的尺寸進(jìn)行伸縮
background: url(img/bottom-left.gif) no-repeat left bottom; //bottom-left.gif應(yīng)用于主框div
}
.box-outer {
background: url(img/bottom-right.gif) no-repeat right bottom; //bottom-right.gif應(yīng)用于外邊的div
padding-bottom: 1px;
}
.box-inner {
background: url(img/top-left.gif) no-repeat left top; //top-left.gif應(yīng)用于內(nèi)部的div
}
.box h2 {
background: url(img/top-right.gif) no-repeat right top; //top-right.gif應(yīng)用于標(biāo)題
padding-top: 1em;
}
.box h2, .box p {
padding-left: 1em;
padding-right: 1em;
}
字號增加冤竹，文本尺寸增加拂封，圓角框會(huì)進(jìn)行水平和垂直擴(kuò)展
CSS3新特性
- 多個(gè)背景圖像：不是定義一個(gè)背景圖像，而是使用任意數(shù)量的圖像鹦蠕，用background-image定義要使用的所有圖像冒签，background-repeat指定是否應(yīng)該重復(fù)顯示，用background-position設(shè)置它們的位置钟病。
<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：設(shè)置邊框角的半徑萧恕。
- border-image：允許指定一個(gè)圖像作為元素的邊框，根據(jù)一些百分比規(guī)則把圖像劃分為9個(gè)單獨(dú)的部分肠阱，瀏覽器會(huì)自動(dòng)的使用適當(dāng)?shù)牟糠肿鳛檫吙虻膶?yīng)部分---九分法縮放票唆，有助于避免在調(diào)整圓角框大小時(shí)出現(xiàn)的失真。
<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個(gè)部分。
border-image屬性會(huì)自動(dòng)的把圖像的每個(gè)部分用于對應(yīng)的邊框缘回，因此吆视，圖像的左上部分用作左上邊框典挑，右邊中間部分用作右邊的邊框。25px是邊框的寬度啦吧，如果圖像不夠大您觉，它們會(huì)自動(dòng)平鋪，產(chǎn)生一個(gè)可擴(kuò)展的框授滓。
