像这个示例网站上那样实现略圆角的最简单方法是什么?
我必须实现一个与此处所示样式相同的选项卡控件:
这是我到目前为止提出的示例:
我面临的最大问题是第一个有“圆”角,这是由用于开发网站的 ASP.NET AJAX 自动实现的。
由于我没有使用 ASP.NET AJAX,是否有一种简单的方法可以实现在 IE6 和真实浏览器上工作的相同效果?最好的方法是通过 jQuery 还是 CSS 来做到这一点?
编辑:如果在 IE6 中无法在没有图像的情况下获得圆角,那么在其他浏览器中实现圆角的最佳方法是什么?
I have to implement a tab control identical in terms of style to what can be seen here:
This is the example I've come up with so far:
The biggest issue I'm facing is that the first one has 'rounded' corners that was implemented automatically by the ASP.NET AJAX used to develop the site.
As I'm not using ASP.NET AJAX is there an easy way for me to achieve the same effect that will work on IE6 as well as real browsers? Is the best way to do this via jQuery or CSS?
edit: if it's not possible to get rounded corners in IE6 without images, what's the best way to do it in the rest of the browsers?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我喜欢 jQuery Corner 插件。它将在 IE7 和 IE8 上使用 IE7 兼容模式工作。当然,IE6会忽略它。它真的很轻量级,胜过仅仅为了角落而加载 jQuery-UI。
I like the jQuery Corner plugin. It'll work on IE7 and IE8 with IE7 compatibility mode. Of course, IE6 ignores it. It's really lightweight and beats loading jQuery-UI just for corners.
到目前为止,我发现的最简单的方法是使用 Jquery UI 实现圆角。
只需包含两个文件并将其添加到类声明中即可:
(圆角元素的所有角)或
< element class="ui-corner-tl ui-corner-tr myclass">
(round top left, top right)IE 默认情况下对圆角不友好,因此要完全复制您所拥有的用户体验放入 Jquery 或其他替换脚本。我的大企业客户一致认为这是不值得的——因为它会优雅地降级为方角,IE 用户将不得不处理它——他们首先选择使用劣质浏览器。
紧随其后的第二位是“边框半径”选项 (http://www.css3.info/preview /rounded-border/),但需要担心的是更多语法。使用 Jquery UI 还可以提供一些很棒的功能,例如自动完成、选项卡、按钮(标准 HTML 按钮的改进)等。
By far the easiest way I've found is using Jquery UI for rounded corners.
It's as easy as including two files and adding this to your class declarations:
<element class="ui-corner-all myclass">
(round all corners of element)or
<element class="ui-corner-tl ui-corner-tr myclass">
(round top left, top right)IE is not rounded corner friendly by default, so to exactly duplicate the user experience you'd have to throw in a Jquery or other substitution script. My big corporate clients have unanimously agreed that's not worth the effort--since it gracefully degrades to square corners, IE users will have to deal with it--they chose to use the inferior browser in the first place.
A close second place is the Border radius option (http://www.css3.info/preview/rounded-border/) but it's more syntax to worry about. Using Jquery UI also opens up great features such as Autocomplete, Tabs, Buttons (improvement on standard HTML buttons) etc.
要在 IE 6 中使用圆角,您必须使用图像
To get rounded corners working in IE 6, you'll have to use images
这是一个很好的例子,使用 JavaScript 创建圆角:
Nifty Corners : http:// /www.html.it/articoli/niftycube/nifty1.html
使用 Canvas 元素(即使在 IE 中):http://www.netzgesta.de/corner
Here's a good example, creating rounded corners using JavaScript :
Nifty Corners : http://www.html.it/articoli/niftycube/nifty1.html
Using Canvas Element (even in IE) : http://www.netzgesta.de/corner