CSS 角形状（corner-shape）能实现哪些效果？

初涉代码时，实现圆角需要五张背景图或用Photoshop制作的精灵图，因此当border-radius出现时，我记得所有人都觉得这是最棒的发明。当时网页设计过于方正，圆角效果不仅酷炫，还节省了大量时间。

克里斯2009年撰写的border-radius教程（距今已有16年之久——等等，我这年纪算多大？！）还包含针对旧版浏览器的厂商前缀，比如”老版Konqueror浏览器”专用的-khtml-border-radius。那真是个令人怀念的年代啊！

如今圆角设计已不再令人雀跃。事实上，锐角设计正强势回归，与”方圆体”（方形圆角或圆形方角，任君选择）同样风靡——这正是CSS的corner-shape属性能实现的效果（今天还将带大家探索该属性创造的诸多酷炫UI特效）。

截至本文撰写时，仅Chrome 139及以上版本支持corner-shape属性，且必须与border-radius属性或相关独立属性（即border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius）配合使用：

使用corner-shape: bevel实现切角效果

随着UI设计师们对粗犷美学的推崇，这种切角设计正日益流行。

在上面的示例中，实现效果非常简单：使用 corner-shape: bevel 实现切角效果，然后通过 border-bottom-right-radius: 16px 设置半径大小。

corner-shape: bevel;
border-bottom-right-radius: 16px;

我们也能做到同样的效果，而且这种赛博朋克美学确实很管用：

使用corner-shape: bevel 实现斜切边效果

斜切边是一种视觉效果，其流行度持续攀升且势头不减，同样能显著弱化元素的方框感。

但在深入探讨前，需注意每个边框圆角都包含两个半长轴——水平轴与垂直轴，每个轴上都有一个“点”（采用矢量术语）。在上例中，两轴均设置为16px，因此两个点沿各自轴线移动该距离（当然是远离其所在角点），随后在两点间绘制斜面线条。但在下方的斜切部分示例中，我们需要为每个轴提供不同的点值，如下所示：

corner-shape: bevel;
border-bottom-right-radius: 100% 50px;

第一个点沿水平轴移动100%，而第二个点沿垂直轴移动50像素，随后在两点之间绘制斜面线条，从而形成上图所示的倾斜效果。

顺便提一句，通过为每个轴和边框半径设置不同数值，正是生成那些炫酷边框半径圆弧的关键技巧。

使用 corner-shape: round bevel bevel round 实现打折促销标签效果

你几乎在每个电商网站上都见过那些促销标签，要么是图片形式，要么采用圆角设计而非尖角（其他技巧实在不值得费心）。但现在我们能同时运用两种不同的corner-shape样式，配合整套边框半径值，精准雕琢出理想的形状：

初始时需使用 corner-shape: round bevel bevel round。顺序按顺时针方向从左上角开始，依次为：

• top-left
• top-right
• bottom-right
• bottom-left

这与 border-radius 的用法相同。虽然可以省略某些值（系统会根据其他值推断），但推断逻辑和最终值的语法都不够清晰，因此建议避免这种做法——尤其当我们即将探讨更复杂的 border-radius 时：

corner-shape: round bevel bevel round;
border-radius: 16px 48px 48px 16px / 16px 50% 50% 16px;

斜杠（/）左侧按上述顺序排列着每个角点的横坐标值，斜杠右侧则是纵坐标值。因此需要明确的是：第一个值与第五个值对应同一个角点，第二个值与第六个值亦然，以此类推。若便于理解，可展开简写形式：

border-top-left-radius: 16px;
border-top-right-radius: 48px 50%;
border-bottom-right-radius: 48px 50%;
border-bottom-left-radius: 16px;

迄今为止，我们其实无需完全理解边框半径的语法。但既然有了corner-shape属性，深入理解就显得尤为必要。

具体数值方面，16px对应圆角（这个容易理解），而48px和50%的数值则用于斜角效果——即边角从水平方向48px延伸至垂直方向50%的位置，由此形成尖角。

关于边框——没错，尖角部分若稍作圆润处理会更美观，但由于浏览器绘制角部的特性，在这些元素上使用边框和轮廓会产生不可预测（但我怀疑是故意为之）的效果，这实在令人头疼。

箭头分隔符效果

没错，一样的方法。

我们本质上创建了一行带有负边距的网格单元，但由于无法生成”内嵌”箭头或使用边框/轮廓，必须设计出特定箭头的伪边框向相邻单元溢出的效果。实现方法是将完全相同的形状嵌套在箭头内部，然后应用类似 padding-right: 3px 的效果——其中3px即为拟边框的值。下方的代码注释将提供更详细说明（不过Pen中的完整代码其实相当有趣）：

<nav>
  <ol>
    <li>
      <a>Step 1</a>
    </li>
    <li>
      <a>Step 2</a>
    </li>
    <li>
      <a>Step 3</a>
    </li>
  </ol>
</nav>

ol {
  /* Clip n’ round */
  overflow: clip;
  border-radius: 16px;

  li {
    /* Arrow color */
    background: hsl(270 100% 30%);

    /* Reverses the z-indexes, making the arrows stack */
    /* Result: 2, 1, 0, ... (sibling-x requires Chrome 138+) */
    z-index: calc((sibling-index() * -1) + sibling-count());

    &:not(:last-child) {
      /* Arrow width */
      padding-right: 3px;

      /* Arrow shape */
      corner-shape: bevel;
      border-radius: 0 32px 32px 0 / 0 50% 50% 0;

      /* Pull the next one into this one */
      margin-right: -32px;

    }

    a {
      /* Same shape */
      corner-shape: inherit;
      border-radius: inherit;

      /* Overlay background */
      background: hsl(270 100% 50%);
    }
  }
}

使用 corner-shape: scoop 实现信息提示框效果

要创建这种工具提示样式，我使用了popover, anchor positioning（将光标定位在工具提示附近）以及 corner-shape: scoop。光标形状与上述示例中使用的箭头形状相同，因此若您更偏好经典三角形工具提示，可将勺形替换为斜面形。

快速演示：

<!-- Connect button to tooltip -->
<button popovertarget="tooltip" id="button">Click for tip</button>

<!-- Anchor tooltip to button -->
<div anchor="button" id="tooltip" popover>Don’t eat yellow snow</div>

#tooltip {
  /* Define anchor */
  anchor-name: --tooltip;

  /* Necessary reset */
  margin: 0;

  /* Center vertically */
  align-self: anchor-center;

  /* Pin to right side + 15 */
  left: calc(anchor(right) + 15px);

  &::after {
    /* Create caret */
    content: "";
    width: 5px;
    height: 10px;
    corner-shape: scoop;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;

    /* Anchor to tooltip */
    position-anchor: --tooltip;

    /* Center vertically */
    align-self: anchor-center;

    /* Pin to left side */
    right: anchor(left);

    /* Popovers have this already (required otherwise) */
    position: fixed;
  }
}

若您更希望这些功能通过悬停触发，即将推出的 Interest Invoker API 正是您所需要的。

使用corner-shape: squircle bevel实现描边高亮

用于语义高亮的<mark>元素默认带有黄色背景，但并不能完全实现荧光笔的效果。通过添加以下两行CSS代码（坦白说，这些数值是我通过随机尝试发现的），我们可以让它更接近手写高亮的效果：

mark {
  /* A...squevel? */
  corner-shape: squircle bevel;
  border-radius: 50% / 1.1rem 0.5rem 0.9rem 0.7rem;

  /* Prevents background-break when wrapping */
  box-decoration-break: clone;
}

我们也可以单独使用方形圆角来制作那些精致的圆角应用图标，或者将其应用于按钮/卡片/表单控件等元素——如果你觉得传统的边框圆角设计开始显得有些陈旧的话：

手绘方盒效果

同样的东西，只是更大。看起来有点像手绘的盒子？

诚然，这种效果在大尺寸下并不那么惊艳，因此若你真正想打造令人惊叹的效果，并追求更接近《荒野大镖客：救赎》的美学风格，采用边框图像的方法会更合适。

 使用 corner-shape: notch实现背景裁剪

带缺口的边框圆角难看得很，我绝不接受其他说法。虽然我不认为你会想用它们来营造视觉效果，但我发现它们在背景裁剪时很有用——只要把无关的轴设置为50%，再把需要裁剪的边对应的轴设置为所需裁剪量即可。例如若需从左侧裁剪30像素背景，则需将水平轴值设为30像素，垂直轴值设为50%（当然仅限于-left-radius属性）。

corner-shape: notch;
border-top-left-radius: 30px 50%;
border-bottom-left-radius: 30px 50%;

结论

所以， corner-shape其实超级有趣。它的用途远超我的预期，相信通过尝试探索，你们还能发现更多妙用。考虑到这一点，就交给各位CSS高手去玩转吧（不过记得要使用Chrome 139或更高版本）。

临别赠礼：奉上这款酷炫却毫无用处的CSS钛战机，纯粹运用 corner-shape与锚点定位技术打造而成：