如何在 Google Chrome 中的 CSS 中做圆角答案

【问题标题】：How do I do rounded corners in CSS in Google Chrome如何在 Google Chrome 中的 CSS 中做圆角
【发布时间】：2009-10-02 07:38:11
【问题描述】：

基本上，我正在尝试弄清楚如何在 CSS 中的 DIV 上进行圆角处理，以便在 google chrome 中呈现

【问题讨论】：

标签： css google-chrome border

【解决方案1】：

Google Chrome（和 Safari）使用以下 CSS 3 前缀

-webkit-border-radius: 10px;

10px 处的所有角

-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;

左上角和左下角 8px

对于 Firefox，您可以使用：

-moz-border-radius: 10px;

所有的角落和

-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;

左上角和左下角

【讨论】：

@Spasm 我认为你有它，但要清楚边框半径是 CSS 3 类。 webkit 前缀专门用于 Chrome 和其他 webkit 浏览器。
@dove - 由于 Spasm 没有提到 border-radius 没有前缀，你是否只是想指出，有一天除了 Opera 之外会有其他浏览器支持这种没有前缀的样式规则?
@Anthony：希望 Webkit 和 Mozilla 浏览器有朝一日会放弃前缀，并像他们应该做的那样转换为默认值。如果你已经有border-radius，那么你就不用进去修改你的代码了……
@Dove - 我同意我们不应该走在对样式规则有相同效果的不同前缀的道路上。我只是想回答这个问题并说明有不同的方法。您的 cmets 确实是正确的，谢谢为读者澄清

【解决方案2】：

涵盖 Chrome、FF 和任何支持 CSS 3 的浏览器：

{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

【讨论】：

【解决方案3】：

像这样编写 CSS 代码对未来很有用：

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

这样，当 IE9/IE10 出现时，您的代码也将在那里工作：D

【讨论】：

【解决方案4】：

鉴于所有浏览器现在都支持无前缀的边界半径；请参阅：http://caniuse.com/#search=border-radius 今天使用的正确语法很简单：

border-radius: 5px;

【讨论】：

【解决方案5】：

是的，但唯一的问题是你实际上抛出了 css 错误，因为 IE 被劫持并且 Microshaft 不想对此做任何事情，我使用的修复是基于 js 的，但我想大多数人都知道这一切.但是，我使用它的原因是因为它总是适用于我和所有主要浏览器。给你。

var obj= document.getElementById('divName');
var browserName=navigator.appName; 
var browserVer=parseInt(navigator.appVersion); 
//alert(browserName);
if ((browserName=="Microsoft Internet Explorer")) {
obj.style.borderRadius = "15px";
}else {
    obj.style.MozBorderRadius = "15px";
    obj.style.WebkitBorderRadius= "15px";

}

【讨论】：