css3給我們帶來乙個非常實用的新屬性：border-image，利用這個屬性我們可以做出隨著內容的增減自動伸縮的背景。廢話不多說，看**！
html:
` 第一條列表內容
第二條列表內容
第三條列表內容
第四條列表內容
第五條列表內容
`css：
`border: 20px solid;
width: 200px;
-webkit-border-image: url(border.png) 30 30 round;
`效果圖：
現在我們增加列表條目，看看效果圖：
隨著列表數目的增加，背景自動變大了，很好！
這是border.png：
你可能會對border-image中的30 30有疑問：
-webkit-border-image: url(border.png) 30 30 round;
看下圖：
上面border-image中的兩個數值，個人理解是，第乙個表示的上下從邊緣開始「吃」進多少畫素作為邊框，對應的，第二個數值表示左右。剩下的中間區域就會被重複（或者拉伸）作為背景。
你可能還有乙個疑問，描邊的大小：border: 20px solid;
我們看看描邊為50畫素時候的樣子：
CSS3的伸縮布局
css3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用，使得開發人員一下子就過上了小康的生活。伸縮盒模型經歷了幾次演變，大致分為舊版伸縮布局 過渡伸縮布局 新版伸縮布局 同樣為了避免混淆，我們以學習新版伸縮布局為主 ...
CSS3 伸縮布局 Flexbox
display flex inline flex 彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中...
CSS3 伸縮布局（一）
css3引入了一種新的布局模式 flexbox布局，即伸縮布局盒模型 flexible box 用來提供乙個更加有效的方式制定 調整和分布乙個容器裡專案布局，即使它們的大小是未知或者動態的，這裡簡稱為flex。flexbox布局常用於設計比較複雜的頁面，可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保...