网页设计师必知：如何用 CSS 创建非常酷的圆弧效果

作为一名合格的网页设计师，编写前端CSS样式是一项基本技能。新手往往对圆角掌握得比较困难。那么如何用CSS制作出非常酷炫的圆弧效果呢？今天无锡网站设计专家海志睿就来和大家分享一下他的设计经验。

1. CSS样式边框特性，单值

让我们从基础开始，希望这不会让你感到无聊，你可能熟悉 CSS 并且知道 -。它已经存在多年了无锡高端网站设计，主要用于像这样的单个值：-:1em，它可能是 2010 年 CSS3 中最受讨论/喜爱的功能之一，当你只使用一个值时南京高端网站设计，所有角都会以该值为界：

正如您在上面的示例中看到的，除了 px、rem 或 em 等固定长度值之外，您还可以使用百分比。通常，这是通过设置 50% 的 - 来创建圆形来实现的。百分比值基于给定元素的宽度和高度。因此，当您在矩形上使用它时，您将不再具有对称角。以下示例显示了应用于矩形的 -: 110px 和 -: 30% 之间的差异。

2.的四种不同值

当您使用多个值时，您将开始设置每个角的值，从左上角开始并顺时针移动。同样，您也可以使用百分比无锡网页制作，并且可以将百分比与固定长度值混合使用。

3. 用斜线分隔的8个值

我想你们大多数人都已经完成了我上面解释的一切，现在我们进入激动人心的部分。如果你使用斜线分隔值并指定最多 8 个值，会发生什么？让我们看看手册上是怎么说的：

如果在斜线前后给出了值，则斜线前的值设置水平半径，斜线后的值设置垂直半径。如果没有斜线，则将值设置为相等的半径。

斜线前的值表示水平距离，而斜线后的值表示垂直长度。但这是什么意思呢？还记得矩形的百分比吗？垂直距离与水平距离和非对称圆角的**值不同，这正是使用斜线语法时所得到的，因此当您将 -: 4em 8em 与 -: 4em / 8em 进行比较时，结果是完全不同的。

左侧的对称角是圆的四分之一，右侧的不对称角是省略的部分。

说实话，你得到的形状有点奇怪。但请记住你用 -: 50% 创建的圆圈。你得到一个圆圈是因为定义一边的两个值加起来是 100%（50% + 50% = 100%），而且没有留下直线，这让你想起了原来的正方形。如果你将相同的逻辑应用于完整的 8 值 - 语法，你可以创建一个看起来有点像或有机单元格的形状：

摘要：通过使用良好支持的边框半径将图像设置为圆形，请不要忘记旧的 CSS 仍然存在并且非常有用，您不需要为每种效果使用一些花哨的东西。