伊图教程网[www.etoow.com]
http://www.etoow.com/html/2007-08/1187531277.html
the javascript calls to round the elements you want
The first three components just don't need changes, whatever you want to accomplish. They need just to be declared in the head section of any HTML page like this:
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
To understand how to implement the fourth part, you need first to understand how the javascript library for Nifty Corners is implemented. Don't worry: you aren't requested to know javascript to use Nifty Corners...
The javascript functions
If you see the code of the example, you'll notice that I left embedded the CSS and part of the javascript to show how the page is build. Let's see the embedded javascript code:
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#nifty","#377CB1","#9BD1FA");
}
</script>
The function NiftyCheck performs a check for DOM support and excludes IE5.x PC for running the script. If the test has passed, the Rounded function is called. It accepts four parameters:
A CSS selector that indicates on wich elements apply the function
Outer color of the rounded corners
Inner color of the rounded corners
an optional fourth parameter, that if is setted to "small" would render small Nifty Corners
The real strenght of the function is that is capable of accepting a CSS selector to target the elements to round. The accepted parameters are:
Tag selector, i.e. "p" or "blockquote" or "h2"
Id selector, with specified tag of the element: for example "div#content" or "p#news" or "li#home"
Class selector, with specified tag of the element: for example "div.entry" or "h2.highlight"
Descendant selector, with some limitation: this has to be composed by an id selector followed by a tag selector. Valid examples are: "div#news div" or "ul#menu li"
About the colors: they should be specified in hex code with # symbol in three or six digits. The outer color could be also set to transparent.
The fourth parameter is optional and must be setted to "small" to get small rounded corners. Let's see an example:
window.onload=function(){
if(!!NiftyCheck())
return;
Stripe it to get it rounded
'http://www.etoow.com/html/2007-08/1187531277.html