WebKit 给自家的 Apply Pay Button 用了光滑圆角

[AlphaRobert]

上：Apple Pay button ／下：同等大小和 border-radius 的黑色 div

然而 Apple Pay button 的圆角可以通过 border-radius 来控制，甚至在圆角过大的时候变成光滑胶囊形。在 macOS Mojave 上测试也依然是光滑圆角。

S.A. iOS 7 的圆角矩形

[yaphets666]

你怎么确定 appe pay 的这个 button 是 css 控制的呢 有网站吗?

[AlphaRobert]

@yaphets666 给任一元素指定 -webkit-appearance 都可以验证

[yaphets666]

@AlphaRobert 不是 我说的是你怎么知道 appe pay 的这个 button 是 css 控制的样式 而不是 canvas 画出来的呢? 你在哪个网站看到的这个按钮呢

[AlphaRobert]

@yaphets666 WebKit 提供了非常简单的方法绘制 Apple Pay button：任意元素只要其 -webkit-appearance: -apple-pay-button，就都会变成 Apple Pay button 。显然 -webkit-appearance 是 CSS 属性。这里有 Apple 官方的 demo： https://applepaydemo.apple.com

[yaphets666]

估计是内核做了特殊的支持吧

[AlphaRobert]

@yaphets666 明明有支持平滑圆角却不提供接口，用低劣圆角打压竞争对手