div+css實(shí)現(xiàn)九宮格效果 有3種方法：

1、方法一：把九宮圖切割成9張圖，用9個(gè)div合在一起，改變寬高，實(shí)現(xiàn)。優(yōu)點(diǎn)：兼容性100%支持，缺點(diǎn)div太多，使用不方便。

2、方法二：把九宮圖按特定格式排列成一張圖，再用9個(gè)div合在一起，改變寬高和padding，實(shí)現(xiàn)。優(yōu)點(diǎn)：兼容性100%支持，缺點(diǎn)div太多，使用不方便。

一張背景實(shí)現(xiàn)自適應(yīng)九宮格

/*為了讓看得簡單清晰點(diǎn)，CSS跟XHTML代碼就不寫那么復(fù)雜了*/

div,span{display:block;background-image:url(./UploadFiles/20081210213558176.gif);}/*我懶所以直接div,span算了*/

.mdl{overflow:hidden;position:relative;width:70%;padding:52px 28px 28px;background:#657B93;}

.mdl div{position:absolute;z-index:2;}

h3{position:absolute;top:20px;z-index:3;margin:0;}

.mdl_t_l{top:0;left:0;width:28px;height:52px;background-position:-28px -52px;}

div.mdl_t_c{top:0;z-index:1;width:100%;height:52px;background-position:-56px 0;}

.mdl_t_c span{height:52px;background-position:-112px 0;}

.mdl_t_r{top:0;right:0;width:28px;height:52px;background-position:-55px -52px;}

div.mdl_c_l{top:0;left:0;z-index:1;width:28px;background-position:0 -52px;}

.mdl_c_l span{width:28px;height:2000px;background-position:0 -132px;}

div.mdl_c_r{top:0;right:0;z-index:1;width:28px;background-position:right top;}

.mdl_c_r span{width:28px;height:2000px;background-position:right -80px;}

.mdl_b_l{bottom:0;left:0;width:28px;height:28px;background-position:-28px -104px;}

div.mdl_b_c{bottom:0;z-index:1;width:100%;height:28px;background-position:0 -133px;}

.mdl_b_c span{bottom:0;height:28px;background-position:-56px -133px;}

.mdl_b_r{bottom:0;right:0;width:28px;height:28px;background-position:-55px -104px;}

一張背景實(shí)現(xiàn)自 適應(yīng)九宮格

在原來的寬高自適應(yīng)的九宮格基礎(chǔ)上做了一些優(yōu)化，把八個(gè)背景圖請(qǐng)求改為一個(gè)，以降低網(wǎng)絡(luò)成本。其實(shí)這也只是一些簡單的小技巧，不過在切圖方面會(huì)比較嚴(yán)禁有1px的不對(duì)稱就會(huì)出問題，請(qǐng)留意下面例子的切割分析。

3、方法三：使用css的border-image屬性實(shí)現(xiàn)。優(yōu)點(diǎn)：div只用1個(gè)，使用方便，缺點(diǎn)是極少數(shù)機(jī)型會(huì)出現(xiàn)白線的問題。

目前推薦使用這種方法：

-webkit-border-image: url('../assets/button_9slice.png') 18 repeat;

border-image: url('../assets/button_9slice.png') 18 fill repeat;

總結(jié)

以上是生活随笔為你收集整理的html 实现格子效果,div+css实现九宫格效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。