CSS高級(jí)技巧-圓角矩形

　　所謂的CSS高級(jí)技巧...其實(shí)是一些對(duì)基本技巧的創(chuàng)意組合, 任何手段和技巧都是解決問題的方法. 只要學(xué)會(huì)這種思考問題的方法, 你也能擁有屬于自己的CSS秘籍.

　　CSS2 還沒有辦法創(chuàng)造出曲線邊框, 明顯的, 僅僅方框是沒辦法滿足我們?cè)O(shè)計(jì)師的. 所以CSS圓角技術(shù)到現(xiàn)在還是那么的火.

　　1. 固定寬度的純色圓角矩形

　　在眾多圓角技術(shù)中, 固定寬度的圓角矩形應(yīng)該是最容易實(shí)現(xiàn)的, 只需要2個(gè)圖片以及一段簡(jiǎn)單的html代碼.

　　html代碼如下:

　　<div class="wrapper">

　　<h1>標(biāo)題</h1>

　　<p>內(nèi)容</p>

　　</div>

　　圖片大致如下:

　　top.gif bottom.gif

　　CSS代碼大致如下:

　　.wrapper{width:181px;background:臨汾市8cc355 url(../images/bottom.gif) no-repeat left bottom;}

　　.wrapper h1{padding:10px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}

　　.wrapper p{padding:0 20px 10px 20px;}

　　Tips:

　　wrapper中的寬度(width)是圖片的真實(shí)寬度, 背景中的背景色是與純色圖片相同的顏色.

　　h1和p中相應(yīng)設(shè)置了內(nèi)補(bǔ)丁,為了內(nèi)容不重疊或碰到外框.

　　圖片需要有背景色, 即除了圓角矩形純色部分的顏色以外的區(qū)域需要有和當(dāng)前容器( div class="wrapper" )所在的父級(jí)容器相同的背景色.

　　這種方法適用于寬度固定, 高度自適應(yīng)的純色圓角矩形.

　　2. 固定寬度的非純色圓角矩形

　　這個(gè)方法是上一個(gè)方法的延伸, 這次我們不在容器上定義背景色, 而是定義重復(fù)的背景圖片.

　　html代碼如下:

　　<div class="wrapper">

　　<h1>標(biāo)題</h1>

　　<p>內(nèi)容</p>

　　</div>

　　圖片大致如下:

　　top.gif bottom.gif tile.gif

　　CSS代碼大致如下:

　　.wrapper{width:183px;background:url(../images/tile.gif) repeat-y center;}

　　.wrapper h1{padding:20px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}

　　.wrapper p{padding:0 20px 20px 20px;background:url(../images/bottom.gif) no-repeat left bottom;}

　　Tips:

　　特性與第一個(gè)方法類似;

　　不能適用于非垂直改變的背景圖像.

　　PS. 固定高度的圓角矩形也可以類似的完成,不贅述了

　　3. 滑動(dòng)門技術(shù)(Sliding Doors)

　　前面的兩種圓角矩形都是固定寬度的,只能在垂直方向上自適應(yīng)增長(zhǎng)(或水平方向上), 如果需要同時(shí)在垂直方向與水平方向上自適應(yīng)增長(zhǎng)尺寸的話, 很顯然前兩種方法不適用. 這時(shí)我們就可以采用所謂的滑動(dòng)門技術(shù).

　　原理:

　　Top-Left.gif 與 Bottom-Left.gif 都是大圖像, Top-Right.gif 和 Bottom-Right.gif 都是小圖像, 小圖像在大圖像上根據(jù)尺寸進(jìn)行自動(dòng)滑動(dòng)以適應(yīng)內(nèi)容.

　　該方法用到2組4個(gè)圖片: 1組Top圖片構(gòu)成頂部圓角, 1組Bottom圖片構(gòu)成底部圓角以及主體. 注意容器的最大高度和寬度不能超過圖片的最大高度和寬度.

　　圖片的結(jié)構(gòu)位置:

　　html代碼大致如下:

　　切圖