用背景圖片要好看得多，問題是不能拉伸，最簡(jiǎn)單做法就是用四個(gè)角小圖片加邊框拼出來。不過這樣多出N多圖片，一堆亂七八糟的代碼，相當(dāng)不爽。
有一個(gè)很有技巧的方法，用一張大圖片+CSS來做，原理如下。 
用一張大的背景圖片做圓角，用CSS分別取四個(gè)角和邊再拼成一個(gè)DIV。這樣不僅可以解決圓角，還可以生成其它特殊的邊框（比如陰影）。
但是每次使用都要加CSS也很不爽，于是用mootools寫了一個(gè)Element類的擴(kuò)展。
代碼如下:
setBorder
Element.implement({
setBorder: function(pic, len) {
///
/// 設(shè)定容器邊框（圖片）.
/// 已測(cè)div
///
/// 圖片地址
/// 邊框?qū)挾?/param>
///
var content = this.clone();
var width = this.getSize().x + len * 2;
var height = this.getSize().y + len * 2;
this.empty().setStyles({ 'width': width, 'height': height });
var lt = new Element('div', {
'styles': {
'width': len,
'height': len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat left top'
}
});
var rt = new Element('div', {
'styles': {
'width': width - len,
'height': len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat right top'
}
});
var lb = new Element('div', {
'styles': {
'width': len,
'height': height - len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat left bottom'
}
});
var rb = new Element('div', {
'styles': {
'width': width - len,
'height': height - len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat right bottom'
}
});
content.inject(rb, 'top');
lt.inject(this, 'top');
rt.injectBottom(this);
lb.injectBottom(this);
rb.injectBottom(this);
return this;
}
});
這樣在頁(yè)面上直接調(diào)用setBorder方法傳個(gè)背景圖片，邊框?qū)挾冗M(jìn)去就行了。
HTML代碼
代碼如下:
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
