在自然界中艰争，很多地方可以看到圓的曲線桂对，甚至是圓的形狀。就算是邊邊角角也都是圓潤(rùn)的弧度逾柿。例如：dva的性感小屁股。反觀尖銳的90°直角在自然界中反到變成了一個(gè)另類机错。而在編寫網(wǎng)頁(yè)的時(shí)候也經(jīng)常會(huì)用到“圓角”這類的表達(dá)方式，不得不承認(rèn)圓角圖形確實(shí)比直角圖形有更友好的交互體驗(yàn)弱匪。
圓角相關(guān)的解決方法有好幾種璧亮。其中用圖片解決圓角問題那是最簡(jiǎn)單粗暴，如果寬高是固定且已知的枝嘶，直接background-image就能完美解決。例如
background-image屬性是設(shè)置背景圖片及刻，所有瀏覽器都支持此屬性，但是任何版本的IE（包括 IE8）都不支持屬性值 “inherit“缴饭。用法是background-image:url("*url*");。這里面需要注意的是相對(duì)地址颗搂，由于這條聲明是寫在在CSS文件中的汪疮，圖片的相對(duì)地址一定不能寫錯(cuò)毁习。否則啥也不會(huì)顯示智嚷。
相對(duì)于background-image盏道，我更是喜歡通過background設(shè)置背景屬性來操作頁(yè)面。這是一個(gè)簡(jiǎn)寫屬性猜嘱，可以在一條聲明中一次性設(shè)置所有的背景屬性衅枫。通過background可以設(shè)置如下屬性：
- background-color（規(guī)定要使用的背景顏色弦撩。）
- background-position（規(guī)定背景圖像的位置。）
- background-size（規(guī)定背景圖片的尺寸益楼。）
- background-repeat（規(guī)定如何重復(fù)背景圖像。）
- background-origin（規(guī)定背景圖片的定位區(qū)域感凤。）
- background-clip（規(guī)定背景的繪制區(qū)域粒督。）
- background-attachment（規(guī)定背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。）
- background-image（規(guī)定要使用的背景圖像屠橄。）
例如：background:url("") repeat-x top left;簡(jiǎn)單的介紹一下，background-repeat:repeat-x;在水平方向重復(fù)仇矾，background-position:top left;圖片的初始位置在左上部。小tips:background-position如果只設(shè)置一個(gè)值贮匕，那么第二個(gè)默認(rèn)的是center。
還有一點(diǎn)需要了解的是background-position還可以設(shè)置百分比和具體像素值刻盐，這個(gè)就是CSS Sprite的技術(shù)原理。更具體的使用請(qǐng)自行查找~敦锌！繼續(xù)往下面進(jìn)行吧。
為了能讓背景圖片完全的顯示出來颖变，應(yīng)用background-image的元素必須要設(shè)置和圖片一樣的寬和高，寬和高的固定導(dǎo)致內(nèi)容文本字?jǐn)?shù)就有了限制腥刹，應(yīng)用起來非常不靈活衔峰。人們的創(chuàng)造力還真是無窮的，為了應(yīng)對(duì)字?jǐn)?shù)問題威彰，人們發(fā)明了一個(gè)技巧來應(yīng)對(duì)這種情況——CSS滑動(dòng)門技術(shù)。
滑動(dòng)門技術(shù)原理很是簡(jiǎn)單歇盼，就是將圖片分為左右兩部分，左側(cè)圖片很窄旺遮，包含于第一層標(biāo)簽的的background屬性中盈咳，是固定不變的，而右側(cè)圖片要做的盡可能寬一些鱼响。嵌套在第二層標(biāo)簽中的background屬性中，處于右上角丈积，且距離左側(cè)留出左側(cè)圖片的寬度，以便左側(cè)圖片顯示江滨，這樣，由于右側(cè)圖片足夠長(zhǎng)唬滑，隨著文本增長(zhǎng)，不會(huì)超過其長(zhǎng)度晶密，就好像可以隨文本長(zhǎng)度變化而變化一樣。很形象的名稱不是么稻艰？有好幾種方式實(shí)現(xiàn)滑動(dòng)門效果，基本原理都是一樣的尊勿。直設(shè)背景圖和推拉門技術(shù)的優(yōu)劣下圖可以清晰說明。
滑動(dòng)門的代碼量也是很少,不過需要掌握一點(diǎn)PS技術(shù)躯保，事先要先把圖片分成兩部分然后分別存成圖片：
/*css代碼部分*/
#hdm li {
float: left;
background: url("jpg01.jpg") no-repeat left top;
margin: 0;
padding: 0 0 0 12px;
}
#hdm a {
float: left;
display: block;
background: url("jpg02.jpg") no-repeat right top;
padding: 5px 15px 4px 6px;
text-decoration: none;
font-weight: bold;
color: #765;
}
/*HTML代碼部分*/
<ul id="hdm">
<li><a href="/" title="">李東的博客</a></li>
</ul>
最后效果如下摇展，這樣字?jǐn)?shù)就算加多也不會(huì)影響了，算是增加了一部分靈活性咏连。
用圖片作為背景來解決圓角的方案實(shí)現(xiàn)起來很簡(jiǎn)單，不過容易受圖片本身的制約振惰。圖片多也就意味著瀏覽器鏈接數(shù)也會(huì)多會(huì)導(dǎo)致渲染效率低下。用圖片背景不光能解決圓角邊框的問題骑晶，再?gòu)?fù)雜的邊框圖形也是手到擒來，這是其他幾種方法遠(yuǎn)遠(yuǎn)比不了的桶蛔。例如一下幾種復(fù)雜的邊框，用border-radius和border-image那是絕對(duì)搞不定的仔雷。
滑動(dòng)門是一項(xiàng)很老的技術(shù)了舔示，現(xiàn)在它依然堅(jiān)持工作在第一線，雖然border-radius和border-image的出現(xiàn)對(duì)這項(xiàng)技術(shù)有一定沖擊惕稻，但是新東西需要瀏覽器支持，而有些應(yīng)用場(chǎng)景還真是少不了background-image的活躍俺祠。狀態(tài)不是很好，就寫到這里吧蜘渣。
