跨浏览器圆角(无图像)
将 PSD 转换为 HTML 甚至 HTML5 和 CSS 时,圆角并使这些角在所有浏览器(尤其是 Internet Explorer)中保持一致有多困难?
假设角落是用代码而不是图像来圆化的。
When converting PSD's into HTML or even HTML5 and CSS, how much more difficult is it to round the corners and make those corners consistent across all browsers, especially Internet Explorer?
Assuming the corners were rounded with code, not images.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
如果您需要 JavaScript 解决方案,可以查看 Corner。它是跨平台的。
You can check out Corner if you want a JavaScript solution. It's cross platform.
您已经接受,但 CSS3 PIE 您可以只使用
border-radius
属性(以及IE3 中的渐变、阴影和其他有趣的 CSS3 功能)。我认为这是解决问题的更干净的方法之一。You already accepted but CSS3 PIE you can just use the
border-radius
property (along with gradients, shadows, and other fun CSS3 features) in IE3. I think it's one of the cleaner ways to approach the problem.对于不使用 Javascript 的跨浏览器圆角,有一些解决方法:
使用 CSS3 进行 webkit &基于 gecko 的浏览器、Opera 的 SVG 和 IE 的 VML。
另外,如果您想通过 Javascript 使用众所周知的 jQuery Corners。
There are a few workarounds for cross browser rounded corners not using Javascript:
Using CSS3 for webkit & gecko based browsers, SVG for Opera and VML for IE.
Also you may want to use the well-known jQuery Corners if you want it via Javascript.
有了 CS3
border-radius
属性,这并不难。有些浏览器有自己的实现,例如 firefox 的-moz-border-radius
以及 safari 和 chrome 的-webkit-border-radius
。但IE仍然不支持border-radius,所以很难让它跨浏览器工作。
With the CS3
border-radius
property, it's not hard. Some browsers have their own implmentation, like-moz-border-radius
for firefox and-webkit-border-radius
for safari and chrome.But IE still does not support the border-radius, so it's hard to get make it work cross-browser.