jquery below has an extension is the use of pure JS generated rounded corners, but and div+css spelled out is the same truth, rounded corners look relatively rough.
With the background picture lot better much, the problem is not stretching, the simplest way is to use four corner small picture plus border spelled out. But so much more than n pictures, a bunch of messy code, quite uncomfortable.
There is a very skillful way, with a large picture +css to do, the principle is as follows.
Use a large background image to do rounded corners, with CSS to take four corners and edges and then spell a Div. This will not only solve the fillet, but can also generate other special borders (such as shading).
But each use to add CSS is also very uncomfortable, so with MooTools wrote an extension of the element class.
Copy Code code as follows:
SetBorder
Element.implement ({
Setborder:function (pic, Len) {
<summary>
Sets the container border (picture).
Measured Div
</summary>
<param name= "pic" > Picture address </param>
<param name= "len" > Border width </param>
<returns type= "Element"/>
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;
}
});
This will call the SetBorder method directly on the page to send a background picture, the border width in the line.
HTML code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>untitled page</title>
<script type= "Text/javascript" src= "Mootools.js" ></script>
<script type= "Text/javascript" >
Element.implement ({
Setborder:function (pic, Len) {
<summary>
Sets the container border (picture).
Measured Div
</summary>
<param name= "pic" > Picture address </param>
<param name= "len" > Border width </param>
<returns type= "Element"/>
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;
}
});
Window.addevent (' Domready ', function () {
$ (' demo '). GetElements (' div '). each (function (d) {
D.setborder (' Border.png ', 8);
});
});
</script>
<body>
<div id= "Demo" >
<div style= "width:150px; height:100px; " >
<div style= "width:100%; height:100%; background-color:red; " ></div>
</div>
<div style= "width:80px; height:130px; " >
<div style= "width:100%; height:100%; Background-color:green; " ></div>
</div>
</div>
</body>
Show effects
MooTools Border Demo http://demo.jb51.net/js/mootools_yj/demo.htm
Package download
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>untitled page</title> <sc Ript type= "Text/javascript" src= "http://img.jb51.net/jslib/mootools.js" ></script> <script type= "text/" JavaScript "> Element.implement ({setborder:function (pic, len) {///<summary>///set container border (picture). Measured div///</summary>///<param name= "pic" > Picture address </param>///<param name= "len" > Border width </para m>///<returns type= "Element"/> 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 ': ' URLs (' + 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; } }); Window.addevent (' Domready ', function () {$ (' demo '). GetElements (' div '). each (function (d) {D.setborder ('/upload/ 2010-2/20100207111018894.png ', 8); }); }); </script> </pead> <body> <div id= "Demo" > <div > <div ></div> </div> <div > <div ></div> </div> </div> need to refresh to load external JS frame </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Previously used jquery also wrote one, incredibly can not find, but the principle is the same.
