如何在没有抗锯齿的情况下获得边界半径？

Question

我想通过增加 scale() 值使具有 border-radius 的 div 角像素化，但浏览器使它们平滑，有什么方法可以实现吗？

Answer 1

我认为没有办法对 div 进行像素化，因为它们将使用矢量绘制。但是通过一些聪明的 CSS 你可以剪裁边框。查看 Luke Bonaccorsi 的 Pixelated Rounded Corners 工具。

这是他的工具的结果

.pixel-corners {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: black;
  height: 100px;
  width: 200px;


  /** Luke Bonaccorsi's Pixelated Rounded Corners **/

  clip-path: polygon(
    0px 20px,
    4px 20px,
    4px 12px,
    8px 12px,
    8px 8px,
    12px 8px,
    12px 4px,
    16px 4px,
    20px 4px,
    20px 0px,
    calc(100% - 20px) 0px,
    calc(100% - 20px) 4px,
    calc(100% - 12px) 4px,
    calc(100% - 12px) 8px,
    calc(100% - 8px) 8px,
    calc(100% - 8px) 12px,
    calc(100% - 4px) 12px,
    calc(100% - 4px) 16px,
    calc(100% - 4px) 20px,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 4px) calc(100% - 20px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 16px) calc(100% - 4px),
    calc(100% - 20px) calc(100% - 4px),
    calc(100% - 20px) 100%,
    20px 100%,
    20px calc(100% - 4px),
    12px calc(100% - 4px),
    12px calc(100% - 8px),
    8px calc(100% - 8px),
    8px calc(100% - 12px),
    4px calc(100% - 12px),
    4px calc(100% - 16px),
    4px calc(100% - 20px),
    0px calc(100% - 20px)
  );
}

<div class="pixel-corners">Pixel Corners</div>

如何在没有抗锯齿的情况下获得边界半径？

How can I have border-radius without anti-aliasing?

css

antialiasing