Cross browser rounded corners (no image)

亡梦爱人 提交于 2019-12-18 13:03:00

问题


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.


回答1:


You can check out Corner if you want a JavaScript solution. It's cross platform.




回答2:


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.




回答3:


There are a few workarounds for cross browser rounded corners not using Javascript:

CSS Rounded Corners In All Browsers
An Experiment in Rounded Corners
Rounded corners in CSS (cross browser implementations)

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.




回答4:


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.



来源:https://stackoverflow.com/questions/2814348/cross-browser-rounded-corners-no-image

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!