使用CSS3時限隨內容自動伸縮的背景

CSS3為我們帶來一個非常實用的新屬性：border-image，利用這個屬性我們可以做出隨著內容的增減自動伸縮的背景。廢話不多說，看程式碼！
HTML:
<ol>     <li>第一個清單內容</li>     <li>第二條清單內容</li>     <li>第二條清單內容</li>     <li>第三條列表內容</li>     <li>第四條清單內容</li>     <li>第五條清單內容</li> </ol>

##border: 20px solid; width<a href="//m.sbmmt.com/wiki/835.html" target="_blank">: 200px; -webkit-border-image: url(border.png) 30 30 round;</a>#效果圖：

#現在我們增加清單條目，看看效果圖：

#隨著清單數目的增加，背景自動變大了，很好！
這是border.png：

###你可能會對border-image中的30 30有疑問：######-webkit-border-image : url(border.png) 30 30 round;######看下圖：###############上面border-image中的兩個數值，個人理解是，第一個表示圖片的上下從邊緣開始「吃」進多少像素作為邊框，對應的，第二個數值表示左右。剩下的中間區域就會被重複（或伸展）當作背景。 ###你可能還有一個疑問，描邊的大小：###border: 20px solid;######我們看看描邊為50像素時候的樣子：######### ######所以現在你明白了吧。 ###至於描邊的顏色，因為不會顯示出來，所以寫不寫無所謂。 ###好了，現在你已經知道如何做出這種隨內容自動伸縮的背景，可以去實踐一下了！ ##########

以上是使用CSS3時限隨內容自動伸縮的背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！