当您有一个元素嵌套在另一个带有填充的元素中，并且两者都有不同的背景和 border-radius 时，请确保内部元素的 border-radius 比外部元素略小。
否则，它会在边缘周围形成一种过于粗大的“隆起”。
可能有一些花哨的数学运算可以帮助您计算出完美的值，但我发现目测的效果还不错。
公共服务公告：小心嵌套的 border-radius
Chris Coyier 于 发布
DigitalOcean 为您的旅程各个阶段提供云产品。立即开始使用 免费赠送 200 美元！
Chris，这真是一个很棒的提示！伙计，我真的希望你的域名问题能够得到解决。我无法相信世界上会有如此邪恶的存在。你免费分享你的知识，而一些自私的人却决定要和你作对。拜托了伙计（对黑客说），请放过 Chris 吧！
嗨 Chris。
我很想知道你域名的最新消息，你一直分享这种很棒的提示，我不想看到它停摆！
你只需要确保两条曲线共享同一个中心点。边框半径的差异应该与边框之间的距离相同。
如果您使用的是
5px宽的边框和25px的外部边框半径，则内部边框半径应该是20px。数学运算没有那么复杂。
抢在我前面了！
我不知道，也许吧。看起来很有道理，但这与上面的情况完全相同。外部元素的边框半径为 20px，填充为 5px，但内部元素使用 15px 却不行，它太直/太细了。17px 感觉更合适。这个数学运算是怎么算出来的呢？
这是一个 CSS 预处理器可以提供很大帮助的领域——与其在纸上进行一些由声明式样式暗示的快速数学运算，不如将数学运算作为声明的一部分——使用适当的变量可以获得额外的好处。
我们都遇到过别人写的 CSS 代码，其中一个元素的 25px 边框与另一个元素的 20px 边框之间存在隐式关系。能够自我说明的代码可以让每个人的生活更轻松。
Chris，你抢先回答了我的第一个问题，现在我针对 17px 的评论——这可能是浏览器或平台特有的渲染问题，导致 17px 感觉“恰到好处”吗？
例如，
{-webkit-background-clip: padding-box;}是针对 WebKit 特定边框半径问题的 WebKit 特定修复。不同的浏览器可能会偏离，甚至随着规范实现的成熟而发生变化。使用最精确的值似乎是一种可以接受的规避措施。一如既往，感谢您的发布并继续努力——我很高兴听到这个域名不会消失！
-webkit-background-clip: padding-box;对我来说似乎没有产生任何影响。（Chrome 15）就我而言，所有数学都是巫术。
很棒的提示。但我认为“花哨的数学运算”其实很简单
外部半径 - 填充 = 内部半径
例如，如果外部元素的
border-radius:20px; padding:5px，则内部元素的border-radius:15px; /* 20px - 5px */你忽略了内部边框（如果有），最终的数学运算应该是
边框半径 - 填充 - 边框宽度这个公式在很多方面都不可取……只需要仔细思考一下就可以了 :)
我无法相信，当创意/编程领域的成年人谈到基本的三角学时，会说“花哨的数学”。
不错，非常有信息量，Chris。感谢您分享这些内容。
很棒，简单易懂的提示，也应该在印刷设计中使用。
这可是一个高质量的公共服务公告！干得好，Chris
有点明显：>
感谢 Chris，我已经做了一段时间了，但我通常会将内部半径设为外部半径的一半，这样通常可以正常工作。
嗨 Chris。知道这一点真是太好了。谢谢 :)
顺便说一下，我刚下载了 Safari 以检查使用我的代码时的浏览器兼容性。我来到这里是为了查看浏览器的系统，因为你的网站很棒！:)
在你的网站底部，你放了 4 个“框式”广告（DigWP 等），它们没有滚动效果，在 Safari、Opera 和 Chrome 中仅是悬停即显示。在我的主浏览器 -moz- 中运行良好。
只是想让你知道，不知道这是否值得修复，或者是不是故意的。
至少，你的网站上有很多很棒的东西。我喜欢你新的顶部导航栏。干杯
Tom。
那是因为：https://css-tricks.cn/13555-transitions-and-animations-on-css-generated-content/
我故意这样做的，是为了突出显示我们需要这样的功能。
http://jsfiddle.net/qSEvC/
这是一个更好的例子，Tom。
抱歉，这是针对你下面那位朋友的 :)
我还不完全理解，Chris。
http://jsfiddle.net/wWcRK/
我没有看到奇怪的“隆起”。
哎呀，评论标签中的数学运算弄错了，应该是 15 :d
因为在这种情况下，内部边框半径是边框本身的一部分，浏览器会为您处理它。在我的上面例子中，没有使用边框，它是在两个不同元素上设置背景颜色。
http://jsfiddle.net/qSEvC/
这是一个更好的例子，Wouter。
如果您只是用边框来做，那么也没有必要让内部 div 变得那么花哨，只需将背景颜色设置在外部 div 上即可。
http://jsfiddle.net/AJSgU/
此外，如果您只是在内部放置文本，那么将填充设置在外部 div 上，并完全删除内部 div。;-)
是的，今天有点累了，没有仔细阅读，哈哈。
@OwenB 你说得对，我不知道我在想什么，想复制它 :D
@Noah 谢谢，哥们；)
Chris，我认为 17px 比精确的 15px 更好的原因是您正在使用一个大小，在这个大小下，抗锯齿可能会使 2px 的差异影响曲线的显示。您还在白色上面叠加了深色，并在深色上面叠加了浅色。
啊哈，Chris。错过了那篇有价值的帖子！那么主要浏览器为什么更新得如此缓慢呢？或者也许，他们根本无法修复它？
我喜欢 DICK。哈哈
我也是，但是有一个细节在打字的时候写错了。“When you have and element” 应该是“When you have an element”。
哦，真主，请帮助这位仁兄，因为他是我师父[我从他那里学到了很多东西]，而且他还帮助别人！阿米尼！
我通常认为自己很聪明，但我还没有弄清楚如何才能让两个圆角都正确。
有人能确认一下“
border-radius - padding - border-width”这个技巧是否有效吗？或者像 Chris 说的那样，只是不断调整直到看起来正确？感谢您的文章，Coyier 先生，完全同意 DICK - *露出狡猾的眼神*。
你想要达成的效果是两个圆角共享同一个中心。在这种情况下，数学就很容易了：外圆角 - 中间部分 = 内圆角。我将尝试说明一下
x———-)—))
但这只是数学。由于反锯齿（对于像 15-20 像素这样小的半径来说），看起来好的东西可能会有所不同。
相信你的眼睛
基本上我们说的是带有圆角的比例缩放。在这种情况下使用公式毫无意义。只要按你的感觉进行缩放，让它看起来好就行了。
;-)，我几乎看不到你说的那种更详细的半径！太棒了！加油！
这是一个很好的观点，Chris。不久前我注意到了同样的问题，并想出了以下指南
InnerRadius ~ OuterRadius-(gap/Pi)
也就是说，内部元素的圆角大致等于外部元素的圆角减去两者之间的间隙（这可能是外部元素的填充或任一元素的边框宽度）除以 Pi（3 可以应急）。
我通常会非常准确，或者偏差 +/- 1 像素，所以我的公式帮我省去了很多猜测时间，尤其是在大型或复杂的间隙上。
谢谢，Chris
再次感谢！
也许最好引用本文的原始来源，他们在几天前的一条推文中发布了这条建议：http://twitter.com/LeaVerou/status/142404567995387904
从这个角度看，DICK 的缩写就有了不同的含义。
我认为这不应该是一种错觉（眼睛误差）。我认为浏览器没有正确进行数学运算。也许你应该把它提交为一个错误，Chris。
哇，非常感谢！我一直想知道为什么我的一个盒子看起来很奇怪，现在我才意识到这是因为这个！非常感谢！
我喜欢你对细节的关注！继续保持！
我一直看到人们发布关于这类事情的内容，或者在他们的设计中这样做。我整理了这张小图，希望它能解释发生的事情以及如何解决。
basement31 - 多个圆角解释
谢谢，Brendan。
我向 Chris 道歉，Lea 认为这是巧合而不是抄袭。
感谢您的提示。这些细节确实会带来很大的不同！
很棒的提示，谢谢您！
我通过目测和暴力尝试学会了这一点:) 我通常会使用比外部半径小 2 到 4 个像素的半径…
它是外半径 - 边框宽度 = 内半径