如何实现类似宝可梦的像素化border-radius圆角效果？

下面是三种常用的实现方式，你可以根据自己的需求选择：

方案1：纯CSS box-shadow 模拟（无需额外资源/元素，最推荐） #

直接用多层阴影叠加出阶梯拐角效果，替换原有的平滑圆角和边框即可：

#firstPageText {
    width: 300px;
    min-height: 100px;
    /* 移除原有的border和border-radius属性 */
    padding: calc(1em + 4px); /* 补偿边框占用的空间，保证内容位置和之前一致 */
    margin: 0;
    position: absolute;
    bottom: 50px;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    font-family: 'Press Start 2P', cursive;
    background: #fff; /* 必须设置背景色，避免阴影透入内容区 */
    /* 2阶像素圆角的阴影配置，要更大的圆角加对应层级的阴影即可 */
    box-shadow: 
        0 0 0 2px #000,
        -2px -2px 0 2px #000, 2px -2px 0 2px #000,
        -2px 2px 0 2px #000, 2px 2px 0 2px #000,
        -4px 0 0 2px #000, 4px 0 0 2px #000,
        0 -4px 0 2px #000, 0 4px 0 2px #000;
}

你可以调整阴影的像素偏移值、层数，来匹配你想要的圆角大小和像素颗粒度。

方案2：border-image 像素边框图实现（还原度最高） #

自己绘制一张小尺寸的像素边框切片图（四个角预设好阶梯圆角样式），用border-image调用即可实现1:1的复古像素边框效果：

#firstPageText {
    /* 其他原有属性保留，替换border和border-radius */
    border: 4px solid transparent;
    /* 切片值根据你画的边框图调整，repeat模式保证像素不会被拉伸模糊 */
    border-image: url(本地像素边框图路径) 2 repeat;
    /* 关闭浏览器默认的图像平滑处理，避免像素被插值模糊 */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

方案3：clip-path 裁剪实现（适合无描边的背景圆角场景） #

如果只需要内容区背景是阶梯圆角，不需要外层描边，可以直接用clip-path裁剪出对应形状：

#firstPageText {
    /* 其他原有属性保留，移除border-radius */
    clip-path: polygon(
        0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px,
        100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
        4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px)
    );
}

内容的提问来源于stack exchange，提问作者user16262715