::before圆角_快速提示：正确完成圆角

::before圆角

对于你们中的许多人来说，这似乎是理所当然的事情，但是我发现这种情况经常发生，所以我认为值得一提。 我们将这个问题称为不适当的嵌套角落 ； 一个小细节可能会破坏原本出色的设计！

谁在撒旦？

各种各样的设计中都可以发现嵌套的角不正确，但我最常在图标和界面中看到它们。 如果您仍然不知道我在说什么，请看一下这两个灯箱模型的图像-我正在磨哪一个牙齿？

是的，这是我第二次失去睡眠。

简单地说; 如果您有两个平行的圆角，则外角应具有较大的半径，以使“圆角”围绕内部的一个“流动”。

不想进入数学公式（有人说派吗？），尝试可视化一个中心点，即“原点”，您的第一个半径围绕该中心点弯曲。 现在使用同一点圆角化：

这样形成曲线，您会发现最终结果要容易得多。

弯管

想想您正在创建的效果，就像弯曲管道一样：

你做数学

内置在html / css中的接口可能会因为嵌套角不正确而感到内。 想一想字段集中的表单元素，或警报框中的按钮。

不过，要做到这一点并不困难。 两个对象的边界半径之差应等于它们之间的距离。 简单！

这也可以很灵活，例如：

<div class="outer">
	<div class="inner">

	</div><!--/ inner-->
</div><!--/ outer-->

.inner {
    width: 5em;
    height: 5em;
    background: black;
 
    border-radius: 1em;
}
 
.outer {
	display: inline-block;
    background: lightblue;
 
    padding: 3em;
    border-radius: 4em; /*offset + radius of .inner*/
}

完美弯曲的管道（ 请查看演示 ）。

例外情况

像设计中的所有问题一样，没有具体规则-您总会发现例外。 这是本能的问题。

以这个接口为例； 接触按钮和下拉菜单之间的间隙看起来像弯管一样。 也就是说，此接口中的所有拐角均具有统一的半径，因此没有什么地方不合适：

正确的人

我想您可能已经听够了我这么琐碎的事情。 现在，让我们看一下Dribbblers所做的一些令人鼓舞的工作，而不是让我看到尴尬的示例。

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-rounded-corners-done-right--webdesign-7127

::before圆角