当前位置：文江博客话题详情

如何在 Google Chrome 中使用 CSS 实现圆角

发布于 2024-08-07 01:50:12 字数 58 浏览 3 评论 0原文

基本上我想弄清楚如何在 CSS 中的 DIV 上做圆角，该圆角将在 google chrome 中呈现

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

思念绕指尖 2024-08-14 01:50:12

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

-webkit-border-radius: 10px;

所有角的

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

左上角为 10 像素，左下角为 8 像素

对于 Firefox，您可以使用：

-moz-border-radius: 10px;

所有角以及

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

左上角和左下角

Google Chrome (and Safari) work with the following CSS 3 prefixes

-webkit-border-radius: 10px;

for all corners at 10px

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

for the top left corner and bottom left at 8px

For Firefox you can use:

-moz-border-radius: 10px;

for all the corners and

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

for the top left corner and bottom left

回复收藏 0 原文

忘羡 2024-08-14 01:50:12

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

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

To cover both Chrome, FF and any browser that supports CSS 3:

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

回复收藏 0 原文

清风疏影 2024-08-14 01:50:12

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

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

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

It's future-useful to code your css like this:

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

That way, when IE9/IE10 comes out your code will also work there as well :D

回复收藏 0 原文

牵你的手，一向走下去 2024-08-14 01:50:12

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

border-radius: 5px;

Given that all browsers now support border-radius without prefixes; see: http://caniuse.com/#search=border-radius the correct syntax to use today is simply:

border-radius: 5px;

回复收藏 0 原文

安穩 2024-08-14 01:50:12

是的，但唯一的问题是，你实际上抛出了 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";

}

Yes but the only problem with this is that you are actually throwing css errors because of IE being jacked and Microshaft not wanting to do anything about it, the fix that i use is js based but I imagine most people know all about that. But, the reason I use it is because it always works for me and on all the major browsers. Here you go.

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";

}

回复收藏 0 原文

~没有更多了~