一．這篇博客的初衷

　 最近在準備一個下學期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔和說明發(fā)現(xiàn)很多臆想中的效果都實現(xiàn)不了。于是嘗試在百度中搜素，結果資料也是少的可憐，反復轉載的只有一篇來自懌飛博客的《 background-clip與background-origin 的一則運用》

,但畢竟是幾年前的文章，其中的部分內(nèi)容已經(jīng)不適用于現(xiàn)在的標準了，其他的搜索結果也不是很理想于是乎只好自己動手豐衣足食。花了一至了兩天把這個內(nèi)容消化。同時把要點和精總結在這篇博客中，給自己和大家做一個參考。

在CSS3之前，2.0也好，2.1也罷。要想給一個塊級元素添加圓角或是陰影,又或是一個比較復雜的背景圖像(比如多邊形，多紋路)都是相當困難的一件事。在這里先列舉兩個例子，有關如何組織復雜的背景和陰影效果。一方面是為了照顧一些入門web的朋友，另一方面也為了和后面這兩個技術的應用做一個對比，做一個承上啟下的作用。熟練的朋友可以跳過這一節(jié)，直接從下一節(jié)開始閱讀

　　1.請大家先看這樣一個效果：注意文字的背景，大家有沒有主意如何實現(xiàn)？一個最普通不過的想法是，我就按我需要的文字的長度，用photoshop做一個包含左右半圓形狀的完整一體圖片。但問題是，如果我文字的長度需要更改，變得更長或者更短時應該怎么辦？為了不影響美觀，我們又不得不把圖片放回photoshop中返工？雖然不排除這是一種辦法。但要是有非常多的頁面和框背景需要用到這個圖片，那工作量會是非常巨大的。很明顯這是得不償失的。于是我們會想，手動的讓圖片適應文字麻煩，要是能讓圖片自動能適應文字，是絕對的事半功倍。那究竟有沒有這樣一種方法呢？

　　答案是肯定的(在這里我們簡略的談一下關鍵思路，具體代碼的實現(xiàn)就不深究了)，為了實現(xiàn)這個效果，通常我們只需要三幅圖：和和。具體原理如圖所示：

　　相信看到圖之后有朋友應該有不少已經(jīng)心領神會了：我們在原來唯一一個用來存放文字的div中，又插入了三個 div:div#left,div#center,div#right。其中#left和#right分別用來存放半圓形的左右邊緣且固定寬度，而中間的#center用來存放文字，背景采用repeat-x定位，且不定位寬度，再通過其它css設置讓它能收縮緊貼內(nèi)容區(qū)域（content），這樣就能隨著文字的長短而自如伸縮了。最后通過position或display屬性讓#lef，#center，#right實現(xiàn)無縫隙的拼接，同時讓最外層的 div#content也收縮緊貼它包裹的三個div，然后——大功告成。

這個技術的關鍵在于如何讓存放文字的div#center的伸縮引起外部整個div#content的的伸縮，且保持#left,#center和#right的布局不被破壞(要無縫才能讓人感覺一體，感覺真是)……當然這不屬于我們今天的討論范圍，有興趣的朋友可以參考我之前的一篇《深入理解css盒子模型》。這樣就完成了自動伸縮功能。精簡的代碼如下：