Html Border-Radius 在电子邮件和浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7146194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border-Radius not working in Email and Browser
提问by Julie
I have been designing a newsletter, and whilst the border-radius work on my localhost (showing all the rounds edges) - but it does not work when tested through sample email. I emailed myself using yahoo mail and Firefox, it came out with sharp edges. It does not work in outlook 2007 as well.
我一直在设计时事通讯，虽然边界半径在我的本地主机上工作（显示所有圆形边缘） - 但通过示例电子邮件测试时它不起作用。我使用雅虎邮件和 Firefox 给自己发了电子邮件，它的边缘很锋利。它也不适用于 Outlook 2007。
Anyone know how to solve this problem? I will appreciated your help.
有谁知道如何解决这个问题？我将感谢您的帮助。
回答by rickyduck
It will never work in outlook 2007 as that uses word as the renderer, which doesn't support most css.
它永远不会在 Outlook 2007 中工作，因为它使用 word 作为渲染器，它不支持大多数 css。
For firefox, you need to add the -moz-prefix, please ensure you have done that.
对于firefox，您需要添加-moz-前缀，请确保您已经这样做了。
If not, post your css and firefox version.
如果没有，请发布您的 css 和 firefox 版本。
回答by Luc125
I do not think that Outlook 2007 support the border-radiusproperty, so it is probably normal if it does not display rounded corners. If you are looking for a workaround, I suggest you to have a look at this question: How can I make rounded corners on non-CSS3 browsers?
我认为Outlook 2007不支持该border-radius属性，所以如果不显示圆角可能是正常的。如果您正在寻找解决方法，我建议您看一下这个问题：如何在非 CSS3 浏览器上制作圆角？
For the CSS in modern browsers, currently you need to prefix certain proprties, for example:
对于现代浏览器中的 CSS，目前您需要为某些属性添加前缀，例如：
.withRoundedCorners {
border-radius: 5px; // Standard
moz-border-radius: 5px; // Firefox
khtml-border-radius: 5px; //
o-border-radius: 5px; // Opera
webkit-border-radius: 5px; // Safari
ms-border-radius: 5px; // Internet Explorer 9+
}
I know it's boring... But it's temporary, in the future only border-radiuswill be required.
我知道这很无聊……但它是暂时的，只有border-radius将来需要。
回答by Ahsan Rathod
Newsletters in email campaign tools like (outlook, gmail, hotmail) has less CSS support. Moreover, border-radius is supported for web browsers not for email clients.
电子邮件活动工具（如 Outlook、gmail、hotmail）中的时事通讯对 CSS 的支持较少。此外，web 浏览器支持 border-radius，而不是电子邮件客户端。
It is better to use for background images, pure images, gradients, round corners and 3d related stuff instead of using CSS styling.
最好用于背景图像、纯图像、渐变、圆角和 3d 相关的东西，而不是使用 CSS 样式。
See this reference: Campaign Monitor
请参阅此参考：活动监视器
This reference shows which CSS property is supported by different email clients.
此参考显示了不同电子邮件客户端支持哪些 CSS 属性。
See other references: Email newsletter not rendering correctly
查看其他参考资料：电子邮件通讯未正确呈现
