简体繁体 English

我应该采取哪种圆角方法？

[英]What rounded corner approach should I take?

原文 2009-10-30 09:45:29 8 6 javascript/ jquery/ css/ rounded-corners

So there's no shortage of information out there on rounded corners and I've been through much of it and I'm posting to get the opinions of the communities on this point. 因此，圆角处的信息并不缺乏，我已经浏览了很多信息，我正在发布以征询社区的意见。

My scenario is that we're developing a rounded corner dependent design, mainly used for interactions ( <button> and <a> ). 我的情况是我们正在开发一个依赖于圆角的设计，主要用于交互（ <button>和<a> ）。 We are going to use border radius for the good browsers on the block that play nice with it and then use the server to send down JavaScript to browsers that don't. 我们将对边界上的良好浏览器使用边界半径，使其与边界浏览器配合使用，然后使用服务器将JavaScript向下发送给不兼容的浏览器。

What I'm wondering is what to use to up scale the browsers that ignore border radius CSS? 我想知道的是什么可以用来扩大忽略边界半径CSS的浏览器？ I need something that works on button as well as a, div etc. I've been looking at the following and have found that some don't play nice with <button> . 我需要可以在button以及a，div等上使用的东西。我一直在查看以下内容，发现有些<button>效果不佳。 Also the site already uses jQuery. 该站点还已经使用jQuery。

http://www.curvycorners.net/ - http://code.google.com/p/jquerycurvycorners/ http://www.curvycorners.net/ - http://code.google.com/p/jquerycurvycorners/

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

http://www.malsup.com/jquery/corner/ http://www.malsup.com/jquery/corner/

Edit: I've also looked at http://www.dillerdesign.com/experiment/DD_roundies/ and at this point it seems the strongest candidate to me. 编辑：我也看过http://www.dillerdesign.com/experiment/DD_roundies/ ，这时对我来说似乎是最强的候选人。

6 个解决方案

They're all much the same. 他们都是一样的。 I've used the last one ( http://www.malsup.com/jquery/corner/ ) and it works great. 我用了最后一个（ http://www.malsup.com/jquery/corner/ ），它的效果很好。 Almost certainly has more corner styles than you care about, but at 8KB, it's not too heavyweight. 比你所关心的几乎可以肯定有更多的边角样式，但在8KB，这不是太重量级。

Use the one that works and gets the project done on time. 使用可行的方法并按时完成项目。 Beyond that you're not likely to get much useful feedback on this as they all suck from one standpoint or another depending on how you view images, javascript, semantics, adding extra tags to "make it work", etc. 除此之外，您不太可能获得很多有用的反馈，因为它们都从一个或另一个角度吸取，这取决于您如何查看图像，javascript，语义，添加额外的标签以“使其工作”等。

Overall, you should just go with the -webkit-border-radius as well as the -moz-border-radius to support all Webkit and Mozilla browsers. 总体而言，您应该只使用-webkit-border-radius以及-moz-border-radius来支持所有Webkit和Mozilla浏览器。 To have a fix with IE, there is a javascript function to do that. 要使用IE进行修复，有一个javascript函数可以做到这一点。 Hope that helps! 希望有帮助！

spiffycorners.com has a 100% css approach that even works in IE6! spiffycorners.com具有100％的CSS方法，甚至可以在IE6中使用！ This is what I use... 这就是我用的...

I've had some experience with the Javascript methods described above and they all work great. 我对上述Javascript方法有一些经验，它们都很好用。 Personally I would go for something that integrates well with existing Javascript frameworks, like JQuery (which would be my personal choice). 就个人而言，我会选择与现有Javascript框架很好地集成的东西，例如JQuery（这将是我个人的选择）。

Applying the effect to a lot of elements can be very cumbersome for the browser in terms of memory usage however. 但是，就内存使用而言，将效果应用于许多元素对于浏览器可能非常麻烦。 I've had quite a lot of browser crashes due to me being too generous with applying corner effects. 由于我过于慷慨地应用了角点效果，因此导致了很多浏览器崩溃。

Have you looked at Stu Nicholis' CSS play? 您是否看过Stu Nicholis的CSS剧本？ His Snazzy Borders and Krazy Korners are a nice cross-browser solution. 他的Snazzy Borders和Krazy Korners是一个很好的跨浏览器解决方案。