如何使用CSS或JavaScript创建圆角

Question

Duplicate:

What is the best way to create rounded corners using CSS?

I want to create a table with some colums where each column has a rounded corner.

I am not an css expert. I think js solution should be fine too.

If anyone has done it.. I will really appreciate if they can help.

I am not using Jquery.

thanks, ben

Answer 1

Here is a link to 25 different ways to do it with CSS:

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Here is a link to nifty corners to do it with javascript:

http://www.html.it/articoli/nifty/index.html

Answer 2

In safari, chrome (I imagine), firefox 2+ and konquerer (and probably others) you can do it in CSS by using 'border-radius'. As it's not officially part of the spec yet, please use a vendor specific prefix

example

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;

}

The JS solutions generally add a heap of small divs to make it look rounded, or they use borders and negative margins to make 1px notched corners.

IMO, the CSS way is better, as it looks cool, is easy, and will degrade gracefully in IE. This is, of course, only the case where the client doesn't enforce them in IE.

Answer 3

This is what I'm doing on several projects:

For Firefox and WebKit based browsers (although beware Chrome has bugs in this area), use their CSS border-radius based styles for native rounded corners:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

These also let you specify values for each corner, just note that the syntax is slightly different:

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

These are based on the CSS3 border-radius style, more information on the different definitions here: CSS: border-radius and -moz-border-radiuss (note the article is a bit out of date but still relevant). I haven't researched this but I'm not aware of any browsers that implement the native CSS3 border-radius (please corrent me if I'm wrong).

Then for IE, I use DD_roundies which is the most elegant JavaScript solution I've seen and uses native IE VML to draw the corners.

If the user has IE without JavaScript or is using Opera, then tough luck they won't get rounded corners, but in the spirit of Progressive Enhancement this shouldn't ever be a problem.

Answer 4

If you want to stick to CSS the best way is stated already:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

However you are alienating the Internet Explorer marketshare.

To get around this would be to create rounded images for your div. http://www.roundedcornr.com/ has an image generator and example code.

A javascript alternative would be a jQuery plugin like DD_Roundies. Using the DD_Roundies plugin is by far the easiest way to do this. http://www.dillerdesign.com/experiment/DD_roundies/ You simply tell the div how big you want the radius and on what corners, it will do all the magic (colour, gradient) on its own.

Answer 5

Most of the time I see this it involves using clever image manipulation using css. Tables and other such widgets are defined by the browsers so you can't just use them and guarantee everyone to see the same thing.

http://designworkx.co.nz/

Has a simple coming soon page that is a good simple example of this.

Answer 6

HTML makeup tags, CSS and javascript is a more flexible way.

This link tells the arithmetic to generate the css of round corner in any radius. http://www.pagecolumn.com/webparts/rounded_corners.htm