圆角的例子（div+css）_html/css_WEB-ITnose

http://www.html.it/articoli/niftycube/index.html（虽然是英文的，但相信大家耐心点还是可以看的懂的） by Alessandro Fulciniti

More than one year has passed from the first version of Nifty Corners. While it was more of a proof of concept, and the second version presented some big improvements, there was still something missing. So here I present Nifty Corners Cube, that are simpler and more flexible than the previous versions. Let's start.

New features

If you're new to Nifty Corners, I suggest to look in particular at the article on the first version to understand the concept behind them. Basically, Nifty Corners are a solution based on CSS and Javascript to get rounded corners without images.

There are several improvements and new features introduced in Nifty Corners Cube which make it more versatile and simpler to use than the previous versions:

The numbers of parameters has been reduced from four of the first version and five of the second version to just two, of which one is optional. It's not necessary specify the colors anymore, since they are detected automatically. They're easier to integrate into the design process, since the padding (both horizontal and vertical) of elements to round is preserved It's easier to use them with other scripts The support of CSS selectors has been improved and expanded Just a single line in the head section is now needed for the whole library: even if they're still based on both CSS and javascript, the presentational CSS for Nifty Corners is loaded automatically by js They're now released under GPL licence.

Together with the many novelties, that we'll discover through several examples, two features of the previous version has been abandoned. First, the support in Internet Explorer 5.0/Win has been totally dropped. Users of this browser will simply see squared corners, just as users with javascript disabled. The support remains very good however: the examples of the articles have all been tested successfully in IE5.5, IE6 and IE7 beta 2 preview, Opera 8.5, Firefox 1.5 and Safari 2.0. I had to drop even Nifty Corners with borders for compatibility issues I've had with IE and the new approach of the script.

Nifty Corners Cube: introduction

Nifty Corners Cube are a solution to get rounded corners without images, and this third version is build by three main components:

A javascript file, named "niftycornerscube.js" A CSS file, named "niftycorners.css" The javascript calls specific for the pages

Now we're now ready to look at the first example: it's a div with big rounded corners thanks to Nifty Corners. As I said before, the CSS file it's added automatically by javascript. In fact, the only reference to an external file in the example is the following:

Regarding the third point, as is the javascript calls needed for the page, the code for the example is the following:

window.onload=function(){
Nifty("div#box","big");
}

In bold I've reported the part of the script that depends on the page, and that is the call for the function Nifty. This function is the core of the whole library, and receives two parameters that are the strength point of the script. Parameters have to be specified between quotes and separated by a comma. The first parameter is for the CSS selector that targets the elements to round, while the second parameter is for options for default cases could be omitted. Let's see them in depth.

The parameters

The first parameter is for the CSS selector to targets the elements on which apply Nifty Corners. The CSS selectors accepted are: tag selector, id selector, descendant selector (with id or class) and grouping. The following table show some example:

Selector Example tag selector "p"
"h2" id selector "div#header"
"h2#about" class selector "div.news"
"span.date"
"p.comment" descendant selector (with id) "div#content h2"
"div#menu a" descendant selector (with class) "ul.news li"
"div.entry h4" grouping (any number and combination of the previous selectors) "h2,h3"
"div#header,div#content,div#footer"
"ul#menu li,div.entry li"

Talking about options: they're identified by keywords and they can be specified in any order and number. Let's see them:

keyword meaning tl top left corner tr top right corner bl bottom left corner br bottom right corner top upper corners bottom lower corners left left corners right right corners all (default) all the four corners none no corners will be rounded (to use for nifty columns) small small corners (2px) normal (default) normal size corners (5px) big big size corners (10px) transparent inner transparent, alias corners will be obtained. This option activates automatically if the element to round does not have a background-color specified. fixed-height to be applied when a fixed height is set via CSS same-height Parameter for nifty columns: all elements identified by the CSS selector of the first parameter will have the same height. If the effect is needed without rounded corners, simply use this parameter in conjuction with the keyword none.

We'll meet the selectors and options through the many examples I've prepared. Let's start.

Example 1: a single div

The first example has been already presented. The code to round the div with id="box" is the following:

window.onload=function(){
Nifty("div#box","big");
}

The first line is needed to link the nifty corners library, while the others are for the specific page. Background colors of the page and the div id="box" are detected automatically by the script. Another thing to note is that the padding of the div (20px on vertical sides in this case) is preserved.

The part reported in bold is the call to the Nifty function. For the sake of brevity, starting from the next example, I'll report just the calls for this function, but please keep in mind that these have to be incorportated in an embedded script tag or, even better, in an external js file.

Example 2: two divs

In the second example nifty corners were used to round two divs with one single call:

Nifty("div#content,div#nav");

In this case just the first parameter has been used, as is the CSS selector with grouping: the two id selector are separated by a comma. The second parameter hasn't been used, therefore nifty corners will be of medium size (5px) and with antialias by default.

Example 3: transparency

In the example three nifty corners were applied on a div with a gradient background. In such cases the use of inner transparency could be really useful, and will be obtained via the transparent option. Let's see the javascript call:

Nifty("div#box","transparent");

The transparency option is compatible with all others, and is used by default on elements with no background-color set.

Example 4: nifty tabs

The fourth example is one of the major request on nifty corners: a tabbed menu without images. The javascript call is the following:

Nifty("ul#nav a","small transparent top");

Links are rounded on the top side, with small and transparent inside corners. Inner transparency is essential for the rollover effect. In the case rollover with background-color is not needed, here's a small variant where each tab is smooth-rounded and has got a different color. The js call in this case is:

Nifty("ul#nav a","top");

There's a thing to highlight, as is the fact that in both examples the tabs are perfectly elastic, since they're em-dimensioned.

Example 5: nifty buttons

In the fifth example a mini-navigation, suitable for blogs and such, is obtained with nifty corners. The code is the following:

Nifty("ul.postnav a","transparent");

In this markup, a class for the buttons has been used, so it would be possible to get several sets of of link-buttons in the same page. On the nifty corners side, the descendant selector with a class has been therefore used.

Example 6: boxes

In the sixth example nifty corners are used to round six divs with fixed height and bold corners. Each of div has a different color, even the lower-right one which is white like the background of the page. Antialias is automatically done, and padding of the list-items, both vertical and horizontal, has been preserved. But in order to honour the fixed height specified via CSS, the fixed-height keyword has to be specified. Here's the only js call used:

Nifty("div#about li","tl bottom big fixed-height");

Example 7: nifty columns

With the seventh example we introduce one of the biggest new features of nifty corners: nifty columns. This feature allow to get a faux-column effect without background. The option that does the trick is same-height, and the elements must be specified within the first parameter. The call for the example is:

Nifty("div#content,div#nav","same-height");

The option same-height tells the script to detect the height of the elements targetted by the css selector and to assign them the same height, as is the maximum value detected, without the need for background-images.

Example 8,9 and 10: more nifty columns

The examples eight, nine and ten are built on the same markup, which is the following:

Title

Content

查看更多关于圆角的例子（div+css）_html/css_WEB-ITnose的详细内容...