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