圆角的例子（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: