CSS
border-radius属性可以做什么？ 该材料的作者（我们发表了译文）说的内容比乍看之下还多。 特别是，我们正在谈论的事实是，借助此属性使元素变圆的角可以具有非常有趣的形状。
我们建议谈论使用
border-radius的复杂性。
旧属性和现代网页设计
今年，在
苏黎世的
前端会议上 ，
雷切尔·安德鲁 （
Rachel Andrew）就CSS网格技术的可能性作了
演讲 。 在演示的结尾，她谈到了一些旧的CSS属性，她的话引起了我的注意。 即，听起来像是这样：“图像是使用良好支持的
border-radius属性专门制作的。 请记住，旧的CSS仍然存在并且仍然有用。 您不必总是使用全新的东西来创建任何效果。”
表演结束后的一段时间，我发现圆圈只是使用
border-radius可以做的一小部分。 迷上了这个主意，我决定妥善处理此财产。
掌握边界半径
▍单义
让我们从基础开始。 希望您不要对这个例子感到厌烦。 您可能熟悉CSS，以及
border-radius属性。 它已经存在了很长一段时间，他们主要使用它来表示一个单一的含义。 它看起来像这样：
border-radius: 1em 。 也许这是2010年最受关注的CSS3功能之一，当时
css3please.com是设计师的最好朋友。
当使用单个值作为
border-radius元素
border-radius角将根据该值进行舍入。
将正方形的所有角四舍五入为单个边界半径值从上面的示例中可以看到，不仅可以通过在数字之后指定度量单位（例如
px ，
rem或
em来设置固定值，还可以设置百分号。 当
border-radius设置为50％时，通常用于创建基于正方形的圆。 百分比值基于元素的宽度和高度。 因此，当将其应用于矩形时，所得角度将不对称。 这是一个示例，该示例演示了应用于矩形的
border-radius: 110px和
border-radius: 30%属性之间的区别。
圆角矩形请注意右矩形的角是不对称的事实，请记住这一点。 稍后对我们有用。
▍四个单独的值
当使用多个
border-radius值时，请从左上角开始并沿顺时针方向调整每个角的设置。 同样，您可以在此处使用百分比值。 它们也可以与固定值混合。
设置元素四个角的参数values八个值之间用斜杠分隔
我认为你们中的许多人已经尝试了上面讨论的所有内容。 现在是时候进行一些非常有趣的实验了。 如果值之间用斜杠分隔并且最多指定8个，会发生什么情况？ 首先，看一下
规格 。 它告诉我们，如果在斜线之前和之后给出值，则斜线之前的值指定水平半径，而垂直之后的值指定。 如果没有斜线，则两个半径将相同。
因此，斜线前的值负责水平距离，斜线后的值负责垂直距离。 所有这些都很好，但是这里出现了一个逻辑问题：“我们在说什么？” 还记得为矩形设置的角的倒圆百分比值吗？ 此处应用了垂直和水平距离的不同绝对值，并且存在不对称的圆角。 这正是在设置
border-radius时使用斜杠可以实现的目的。
让我们比较以下设置产生的效果：
border-radius: 4em 8em和
border-radius: 4em / 8em 。 结果将有很大的不同。
左元素的对称角为四分之一圆，左元素的非对称角为椭圆的一部分老实说，应用上述设置获得的数字看起来很奇怪。 但是，不要忘记使用以下参数创建圆：
border-radius: 50% 。 由于将定义一侧的两个值相加并获得100％（50％+ 50％= 100％），并且与原始正方形没有直线，因此获得了该圆。 如果您以同样的精神思考用于设置
border-radius属性的八个值，那么事实证明，借助它们的帮助，您可以描述一个看起来像吉他拨片或活生物体中细胞的图形。
通过应用以斜杠分隔的8个值得出的图四个重叠的椭圆形成一个形状我花了一些时间来适应它。 有时，所有这些构造可能很难理解。 如果您对使用
border-radius可定制的复杂形式的元素
border-radius ，则可以使用
此小工具。
总结
既然您知道设置
border-radius时可以使用8个值，那么如果尝试使用上述工具，您会感到有些失望，因为它不允许您独立控制每个值。 如果是这样，那么
这里特别适合您，其版本支持所有八个值的独立配置。 在使用它之前，请记住1984年Ghostbusters电影中的一段对话：
-不要越过溪流。
-为什么？
-但是会很糟糕。事实是，如果您移动操纵器，使其在图形的一侧相交，则它将开始表现出行为...让我们说吧-它将开始表现出不可预测的表现。 我能说什么-自己
看看 。 最后，这不会导致普遍灾难，但是在执行此操作时，请记住我们警告过您。
亲爱的读者们！ 您是否使用border-radius CSS属性？
