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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1375 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

圆角

6 条回复 • 2021-03-17 17:15:00 +08:00

yaphets666

2021-03-17 16:34:11 +08:00

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

AlphaRobert

2021-03-17 16:49:01 +08:00

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

yaphets666

2021-03-17 16:51:09 +08:00

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

AlphaRobert

2021-03-17 16:57:38 +08:00

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

yaphets666

2021-03-17 17:04:40 +08:00

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

AlphaRobert

2021-03-17 17:15:00 +08:00

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