在自然界中，很多地方可以看到圓的曲線，甚至是圓的形狀。就算是邊邊角角也都是圓潤的弧度。例如：dva的性感小屁股。反觀尖銳的90°直角在自然界中反到變成了一個另類。而在編寫網頁的時候也經常會用到“圓角”這類的表達方式，不得不承認圓角圖形確實比直角圖形有更友好的交互體驗。
圓角相關的解決方法有好幾種。其中用圖片解決圓角問題那是最簡單粗暴，如果寬高是固定且已知的，直接background-image就能完美解決。例如
background-image屬性是設置背景圖片，所有瀏覽器都支持此屬性，但是任何版本的IE（包括 IE8）都不支持屬性值 “inherit“。用法是background-image:url("*url*");。這里面需要注意的是相對地址，由于這條聲明是寫在在CSS文件中的，圖片的相對地址一定不能寫錯。否則啥也不會顯示。
相對于background-image，我更是喜歡通過background設置背景屬性來操作頁面。這是一個簡寫屬性，可以在一條聲明中一次性設置所有的背景屬性。通過background可以設置如下屬性：
- background-color（規(guī)定要使用的背景顏色。）
- background-position（規(guī)定背景圖像的位置。）
- background-size（規(guī)定背景圖片的尺寸。）
- background-repeat（規(guī)定如何重復背景圖像。）
- background-origin（規(guī)定背景圖片的定位區(qū)域。）
- background-clip（規(guī)定背景的繪制區(qū)域。）
- background-attachment（規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動。）
- background-image（規(guī)定要使用的背景圖像。）
例如：background:url("") repeat-x top left;簡單的介紹一下，background-repeat:repeat-x;在水平方向重復，background-position:top left;圖片的初始位置在左上部。小tips:background-position如果只設置一個值，那么第二個默認的是center。
還有一點需要了解的是background-position還可以設置百分比和具體像素值，這個就是CSS Sprite的技術原理。更具體的使用請自行查找~！繼續(xù)往下面進行吧。
為了能讓背景圖片完全的顯示出來，應用background-image的元素必須要設置和圖片一樣的寬和高，寬和高的固定導致內容文本字數就有了限制，應用起來非常不靈活。人們的創(chuàng)造力還真是無窮的，為了應對字數問題，人們發(fā)明了一個技巧來應對這種情況——CSS滑動門技術。
滑動門技術原理很是簡單，就是將圖片分為左右兩部分，左側圖片很窄，包含于第一層標簽的的background屬性中，是固定不變的，而右側圖片要做的盡可能寬一些。嵌套在第二層標簽中的background屬性中，處于右上角，且距離左側留出左側圖片的寬度，以便左側圖片顯示，這樣，由于右側圖片足夠長，隨著文本增長，不會超過其長度，就好像可以隨文本長度變化而變化一樣。很形象的名稱不是么？有好幾種方式實現滑動門效果，基本原理都是一樣的。直設背景圖和推拉門技術的優(yōu)劣下圖可以清晰說明。
滑動門的代碼量也是很少,不過需要掌握一點PS技術，事先要先把圖片分成兩部分然后分別存成圖片：
/*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>
最后效果如下，這樣字數就算加多也不會影響了，算是增加了一部分靈活性。
用圖片作為背景來解決圓角的方案實現起來很簡單，不過容易受圖片本身的制約。圖片多也就意味著瀏覽器鏈接數也會多會導致渲染效率低下。用圖片背景不光能解決圓角邊框的問題，再復雜的邊框圖形也是手到擒來，這是其他幾種方法遠遠比不了的。例如一下幾種復雜的邊框，用border-radius和border-image那是絕對搞不定的。
滑動門是一項很老的技術了，現在它依然堅持工作在第一線，雖然border-radius和border-image的出現對這項技術有一定沖擊，但是新東西需要瀏覽器支持，而有些應用場景還真是少不了background-image的活躍。狀態(tài)不是很好，就寫到這里吧。
