如何在我的 Safari 渲染的 Apple Pay 按钮上获得圆角？

Question

有没有办法在 Safari 渲染的 Apple Pay 按钮上放置圆角（使用 -webkit-appearance: -apple-pay-button）？

我知道 Apple 对您可以使用 Apple Pay 按钮做什么和不能做什么非常严格，但是它们 specifically say that you should adjust the corner radius to match the appearance of other buttons：

You can change the corner radius to produce a button with square corners or a pill-shaped button.

现在，我所有的按钮都是药丸状的，所以我想 Apple Pay 按钮也应该是药丸状的。但是，我对如何在浏览器中执行此操作感到困惑，因为 border-radius 似乎被带有 -webkit-appearance: -apple-pay-button 的元素忽略了。

这是一个示例（出于显而易见的原因 仅适用于 Safari），取消选中复选框以查看我想要的边角样式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Apple Pay button test</title>
    <style>
      * {
        font-size: 24px;
      }
      .ap-button {
        border-radius: 1000000px; /*  */
        display: block;
      }
      input:checked ~ .ap-button {
        color: transparent; /* Hide text */
        -webkit-appearance: -apple-pay-button; /* Make Safari render it specially */
      }
      input:not(:checked) ~ .ap-button {
        border: none;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" checked> Render as Apple Pay button
    <button class="ap-button">
       Pay
    </button>
  </body>
</html>

Answer 1

Use this webkit


-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Answer 2

对我有用的是为按钮 css 添加背景颜色。就我而言，我使用的是黑色按钮样式。

在 iOS 13.3.1

上测试

@supports (-webkit-appearance: -apple-pay-button) { 
    button.apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        background: #000;
        border-radius: 20px;
    }
    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }
}

亲切的问候，

Answer 3

对我有用的是只删除 webkit 应用的样式，并为不支持 -webkit-appearance 的浏览器使用 apple 提供的样式。这很好用（注意我的半径和宽度不同）。

    .apple-pay-button {
    display: inline-block;
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 10px 0px 10px 10px;
    padding: 0px;
    box-sizing: border-box;
    min-width: 115px;
    min-height: 32px;
    max-height: 64px;
}
.apple-pay-button-black {
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-color: black;
}
.apple-pay-button-white {
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-color: white;
}
.apple-pay-button-white-with-line {
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-color: white;
    border: .5px solid black;
}

如何在我的 Safari 渲染的 Apple Pay 按钮上获得圆角？

How to get rounded corners on my Safari-rendered Apple Pay button?

html

css

safari

applepay