标准
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
各个角
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
简写
-moz-border-radius: [左上] [右上] [右下] [左下]
-moz-border-radius: 10px 20px 30px 0;
椭圆形圆角 (Firefox 3.5+)
-moz-border-radius-topleft: [水平半径] [垂直半径];
-moz-border-radius-topleft: 10px 40px;
椭圆形圆角简写 (Firefox 3.5+)
-moz-border-radius: [水平半径] / [垂直半径];
-moz-border-radius: 10px / 40px;
-moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;
以上与以下相同
-moz-border-radius-topleft: 10px 15px;
-moz-border-radius-topright: 20px 30px;
-moz-border-radius-bottomright: 30px 45px;
-moz-border-radius-bottomleft: 40px 60px;
WebKit 椭圆形圆角
所有角
-webkit-border-radius: 36px 12px;
仅右角
-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;
感谢您包含我的补充。一些其他的补充
椭圆形圆角:
-webkit-border-top-left-radius: 10px 40px;
椭圆形圆角简写
(注意:没有斜杠)
-webkit-border-radius: 10px 40px;
谢谢,这对我帮助很大。Opera 浏览器怎么样?这能起作用吗?
这与 IE 浏览器不兼容。你能帮我解决吗?
我仍然没有得到我的问题的答案。此代码与 IE 浏览器不兼容
迄今为止的所有版本的 IE 都不支持任何 CSS3,因此您要么必须只使用渐进增强(即,体面的浏览器获得圆角,IE 没有),要么使用图像和/或 JavaScript 来使您的角变圆。
@Prydie
他的意思是 IE 不支持这个功能。因为 IE 是一个糟糕的存在。
如果人们使用 IE 并希望获得更好的互联网体验,这应该足以成为升级到当前浏览器的理由。对于由于工作限制而无法升级的少数人,他们需要做工作而不是寻找漂亮的网站。
作为一个社区,我们需要停止花费宝贵的时间来迎合一个拒绝与其他群体和谐相处的浏览器。最终他们会得到暗示并赶上来或消失,无论哪种方式,互联网都会得到改善。
完全同意 JC 的说法。IE 就是教室后面吃浆糊的小孩…… 让他自己做他想做的事吧。
我们越早停止迎合 IE,微软就会越早开始开发能够跟上潮流的浏览器,或者干脆停止开发它们。尽你所能使你的内容布局清晰易读,忘记 IE 的设计,因为这是浪费时间。
“IE 就是教室后面吃浆糊的小孩。”这真是太搞笑了!!笑死我了!
我不同意说网页设计师需要停止迎合丑陋的浏览器。我正在为一家主要面向使用 IE 的年龄段的诊所设计一个网站。仅仅因为他们的受众没有选择更好的浏览器,并不意味着我不应该花费时间和精力为他们提供设计良好的产品。
还有人用 IE 吗?怪胎……
您可以使用 PIE.js 在 IE 浏览器中获得圆角。
PIE 目前为 IE 6 到 8 添加了以下 CSS3 功能的完全或部分支持
1) border-radius
2) box-shadow
3) border-image
4) 多个背景图像
5) linear-gradient 作为背景图像
Opera 也不支持 border-radius。
您可以通过包含 CurvyCorners 来使其工作
然后 border-radius 也可以在 Opera 和 IE 4.0(!) 及更高版本中使用。
感谢 JavaScript 的继承,希望它能在 IE6 中运行 :)
我听说 jQuery 也可以实现相同的功能?
那么,哪种方法更受青睐,这种方法还是图像样式?
这种方法(根据您想要支持的浏览器,使用或不使用 CurvyCorners)。
为圆角创建图像需要更多工作、更多 HTTP 请求和更多带宽,而不是使用 border-radius。
我真的很讨厌 IE 和其他缺乏良好 CSS 支持的浏览器中的圆角问题。
有没有一种简洁有效的方法可以在所有浏览器中工作?最好是一个 jQuery 插件?
唯一的问题是 CSS 无法在 W3C CSS 验证服务 上通过验证。
我认为我们已经超越了任何人真正关心验证的阶段,因为 CSS 2.1 规范甚至还没有得到正确支持。在出现可以实际验证的明确规范之前,请忽略验证!
很棒又简单!
是真的吗,Firefox 会忽略图像上的圆角?
似乎无法正常工作。
是的,Firefox 还没有支持图像上的圆角。
也就是说,在 Photoshop 中做起来非常容易。
或者您可以将图像放在
<
div> 中,并对其进行圆角处理 (overflow:hidden)
如果想要不同的圆角半径,Safari 需要比简写更详细的代码。您必须为每个唯一的角编写代码。
要在 IE 6-8 中使圆角生效,您需要一个 htc 文件作为解决方法,请尝试以下方法
http://code.google.com/p/curved-corner/
只需下载文件并按照说明操作,您就可以将其与当前的 css 解决方案集成。
它可能有点不稳定,因此请遵循所有建议并下载包含示例的 zip 文件(如果需要)。
这是最佳解决方案。非常感谢您分享。
生成圆角的一个好方法是border-radius.com。
它使用简单,并为 WebKit 和 Gecko 专有扩展以及 CSS3 版本生成 CSS 代码。
您还可以设置每个角的值,它也会输出相应的代码。
您也可以看看FlexiPanels CSS – 一个 Dreamweaver 扩展,可以创建圆角 CSS 盒子而无需编写代码。
嘿,Opera 10.5+ 和 Internet Explorer 9.0+ 完全支持 border-radius!
无论如何,我讨厌 IE……
这不是我在这里看到的。IE v9.0.8112.16421 仍然没有曲线角。
幸运的是我不使用 IE,我只是检查它的兼容性。
一个新手问题,使用像这样的代码,一个人应该将这种类型的代码放在 CSS 的哪个位置才能使其工作,在 body 定义中还是其他地方?
通过 CSS3 实现导航项目圆角的最佳方法是什么,以及如何在 IE 中也能使其生效?渐进增强不起作用,因为圆角将用于导航项目,并且对设计至关重要。
我是否应该只选择所有浏览器的图像替换,或者我可以使用 CSS3,然后使用图像替换为 IE 使用特定的样式表?
谢谢!
谢谢。。。
它帮助了我很多。。。
我尝试使用图像,但我不喜欢使用它。
谢谢……
感谢另一个很棒的代码片段。这激励我更多地关注其他浏览器。
为什么 IE 不支持它并让每个人的生活更轻松?我讨厌必须为某样东西设置样式,然后找出如何在 IE 中修复它!人们,使用 Firefox 而不是 IE,让设计师的工作更轻松 :)
-khtml 丢失了,有了它,您可以拥有除了 IE 之外的所有地方的圆角,IE 不配拥有它!
http://it-things.com/index.php/2011/03/pure-css-rounded-corners-no-images/
很棒的文章和博客主题。
这是我第一次访问您的博客,精彩的帖子!您创建了各种非常有帮助的陈述,我感谢您在制作过程中花费的时间。很明显,您完全了解您在谈论什么。我期待着学习更多您的网站内容。谢谢!
是的,这是纯 CSS 圆角,但主要问题在于 Internet Explorer 6、7 和 8。这就是为什么这通常会让网页设计师头疼的原因。但有些人刚刚用 javascript 编写了一个 htc 文件,可以像放置背景图像一样链接。只需将该 htc 文件放在背景图像的位置即可。这在 IE 上也能工作。
以下是操作方法
.rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior: url(border-radius.htc);
}
此方法大多数情况下都有效……但某些虚拟主机可能不支持 htc。但这并非此方法的错误,而是虚拟主机的错误。但现在大多数人都可以使用纯 CSS 和跨浏览器兼容性创建圆角。
哦,我在之前的评论中忘记了一些东西。
使用此路径代替,因为 border-radius.htc 的工作方式与图像略有不同。
behavior: behavior: url(/css/border-radius.htc);
您也不应该忘记,任何带有 border-radius.htc 的内容都应该设置 position: relative。除非已经有位置。
为了获得最佳效果,请对所有角使用相同的圆角半径。
切勿将 border-radius.htc 与其他 IE 技巧一起使用。
IE 将不得不适应 CSS3 的规则,否则它们将被其他浏览器覆盖。优秀的文章。谢谢。
它是否支持悬停时的圆角。谢谢
查看下面的 URL。这解决了与本文相关的 IE 问题。
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
干杯!
“border-radius.htc”有助于为 IE 中的 div 设置圆角半径,但我想为 IE 中的图像设置圆角半径
只是补充一下我的看法,让我们停止迎合角落里的小家伙。那就是 IE,以防您错过了关于它的评论。
推动网络发展,停止浪费宝贵且有限的时间。
是的,抨击 IE 也是我最喜欢的消遣。但作为网页设计师,你们也应该尽快从高高在上的位置下来。
我的公司为某个 B2B 行业开发了一个网店,其中 IE7 和 IE8 仍然是该网店中公司和商店订购商品时使用最广泛的浏览器。
由于 WinXP 或缺乏管理员权限,这些最终用户大多甚至无法更新到 IE9。让这些最终用户安装 FF 或 Chrome 取决于我们的客户,即网店所有者,事实证明这很困难。许多最终用户基本上是网络和电脑文盲。
我们去年放弃了 IE6 支持,并且开始以基本方式支持 IE7(没有圆角的备用 css,它们可以拥有其 div、输入和按钮公平且“尤其”是正方形)。然而,IE8 还会陪伴我们多年。IE9 也不支持 CSS3 渐变。
当我们的客户希望从我们精心设计的网络产品中赚钱时,我们往往没有太多选择……记住,金钱使世界运转!
它在 IE 浏览器中不起作用
因此,请提供一个圆角代码,该代码也应在 IE 中工作
只需使用<—< 或<–<,这就能解决问题
只需使用 !DOCTYPE html 或 meta http-equiv=”X-UA-Compatible” content=”IE=edge”,这就能解决问题
嘿,在我的 WordPress 博客模板上不起作用。请告诉我该怎么做。
IE 唯一擅长的事情就是下载 Google Chrome 和 Firefox,这样您才能真正使用和体验互联网 ;-)
谢谢,圆角完美地工作了!
感谢您的精彩教程。
border-radius 现在是跨浏览器支持的标准了吗?教程中给出的代码在我的 Firefox 中不起作用,但当我尝试 border-radius 时,它却在我的 Firefox 中起作用了!
无论如何,感谢您的提示。
很棒的教程,帮助我记住了很多简短的代码。
border-radius: 上右下左;
谢谢您,先生。
非常感谢!
我从您的CSS网站中学到了很多东西。我有一个请求,您能做一个关于移动端CSS的教程吗?
您好,先生。
如何实现以下代码?
<html>
<head>
<style type=’text/css’>
ul li a {
width: 100px;
display: block;
text-decoration: none;
-moz-box-shadow: 2px 2px 4px #888;
-moz-border-radius-right: 10px;
}
ul li a:hover {
background: #ebebeb ;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}
</style>
</head>
</body>
<ul >
<li><a href=”#”>nidhi</a></li>
<li><a href=”#”>C++</a></li>
</ul>
</body>
</html>
亲爱的Nidhi,请告诉我你想要哪种类型的导航。
水平还是垂直?
我需要IE7及以上版本的圆角边框,请帮帮我。
感谢您的教程,但如果可能的话,我们需要一个适用于Internet Explorer 7和8的教程:) 请您帮忙吗?!
谢谢。
Quran
这个教程真的很有帮助。非常感谢!
这里有一些关于IE的愚蠢和幼稚的评论。对于大多数企业级网站和应用程序来说,Explorer仍然是主要的浏览器选择。以这种方式将其摒弃,表明了一种幼稚的态度。如果我去参加与我主要客户之一(一家跨国新闻机构)的会议,并告诉他们除非他们切换到一个“像样的”浏览器,否则他们无法获得他们想要的东西,他们会终止我的合同,并转向一个成熟的资源,该资源可以提供适合他们现有的企业级软件选择的的设计和开发解决方案,无论是IE7还是任何其他浏览器解决方案。
我喜欢这个网站的见解和帮助,但我怀疑这些评论者中的一些人是否曾在现实世界中工作过。
我想在你的平行宇宙里是这样。
浏览器统计数据说明了一切。此外,由于各种原因,IE用户的实际数量少于统计数据。如果IE没有与操作系统一起安装,那么没有人会使用它。
我拒绝了客户在IE上的支持请求,我挑战他们找到任何能够维护设计并在IE 5、6中使其正常工作并在7中完美像素化而无需使用javascript的人(许多时候,对于使用低于7版本的许多用户来说,javascript是被禁用的,因为他们太笨了,无法升级操作系统,并且他们设置了很高的安全级别来弥补,这禁用了javascript)
我忘记提到为什么我拒绝了,他们想要IE兼容性而不支付额外费用。我可以使任何东西兼容使用javascript或为每个版本的IE加载一个专用的样式表,但你必须付钱给我。
没有公司会为此付钱给你,只有当你谈到钱的时候,他们才会决定放弃。
唯一幼稚的是你,我认为你要么免费提供IE兼容性,要么你一定是在FrontPage中制作非常简单的文本和图形网站。
任何告诉跨国企业级客户他们不会支持其IE基础的人,都在将自己从企业级开发的世界中移除。他们可以坚持使用当地的鱼贩和美容顾问网站,并将舞台留给那些处理多设备、多平台在线业务的专业人士。仅供参考。
@Creem – 正如所证明的。幼稚和不成熟。
如果你没有支持所有浏览器的技能,你只是一个半成品工匠。
如果你的客户不愿意付钱给你,那么你选择了错误的客户。
如果你的客户准备听从网页开发人员的指示,那么你们两个都没有认真对待自己的工作。
我的公司有一个主要的国际新闻机构客户,拥有超过15,000个使用Sharepoint后端、IE浏览器和云应用程序的办公桌。你是否有一点点概念,如果网页开发人员不支持它,他们更改系统需要花费多少金钱和破坏性变革?
你可能不喜欢“幼稚”这个词,但我们就是我们所做的事情。
这在IE8中不起作用。
很棒的教程。
你好,
我们正在使用angularjs开发Java应用程序。圆角在IE8中不起作用,我使用了PIE.htc,这时一些动态数据不起作用,页面上显示错误,我认为问题出在angularjs上。动态内容div中圆角也不起作用。静态内容div中的圆角在IE中也可以正常工作。
你能帮我解决这个问题吗?
谢谢 & 您好,
Sanjeeva