如何使用Css或javascript创建圆角

Duplicate:

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

使用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.

我不是css专家。我认为js解决方案也应该没问题。

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

如果有人这样做了......如果他们能提供帮助,我将非常感激。

I am not using Jquery.

我没有使用Jquery。

thanks, ben

6 个解决方案

#1

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

以下是使用CSS执行此操作的25种不同方法的链接:

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

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

这是一个链接到漂亮的角落用javascript做到这一点:

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

#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

在safari中,chrome(我想象),firefox 2+和konquerer(可能还有其他)你可以使用'border-radius'在CSS中完成它。由于它还不是规范的正式部分,请使用供应商特定的前缀

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.

JS解决方案通常添加一堆小div以使其看起来是圆形的,或者它们使用边框和负边距来制作1px缺角。

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.

IMO,CSS方式更好,因为它看起来很酷,很容易,并且会在IE中优雅地降级。当然,这只是客户端不在IE中强制执行它们的情况。

#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:

对于基于Firefox和WebKit的浏览器(虽然要注意Chrome在此区域存在错误),但要使用基于CSS边框半径的样式来处理原生圆角:

-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).

这些基于CSS3 border-radius样式,这里有关于不同定义的更多信息:CSS:border-radius和-moz-border-radiuss(注意文章有点过时但仍然相关)。我没有研究过这个,但我不知道有任何浏览器实现原生的CSS3 border-radius(如果我错了,请告诉我)。

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.

然后对于IE,我使用DD_roundies这是我见过的最优雅的JavaScript解决方案,并使用原生IE VML绘制角落。

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.

如果用户没有使用IE浏览器或使用Opera,那么运气不好他们就不会有圆角,但本着渐进增强的精神,这应该不是问题。

#4

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

如果你想坚持使用CSS,最好的方法就是:

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

However you are alienating the Internet Explorer marketshare.

但是,您疏远了Internet Explorer市场份额。

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

要解决这个问题,可以为div创建圆形图像。 http://www.roundedcornr.com/有一个图像生成器和示例代码。

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.

一个javascript替代品将是一个像DD_Roundies的jQuery插件。使用DD_Roundies插件是迄今为止最简单的方法。 http://www.dillerdesign.com/experiment/DD_roundies/你只需告诉div你想要半径多大,在角落里,它会自己完成所有魔法(颜色,渐变)。

#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.

大多数时候我看到它涉及使用css进行巧妙的图像处理。表和其他此类小部件由浏览器定义,因此您不能只使用它们并保证每个人都能看到相同的内容。

http://designworkx.co.nz/

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

有一个简单的即将到来的页面,这是一个很好的简单例子。

#6

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

HTML化妆标签,CSS和javascript是一种更灵活的方式。

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

此链接告诉算术生成任意半径的圆角css。 http://www.pagecolumn.com/webparts/rounded_corners.htm

#1