iOS移动端border-radius不生效求助：桌面及Android端显示正常

border-radius属性在iOS移动端无法生效，但在桌面端及Android端可正常显示。

现有实现代码 #

CSS代码 #

.play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 325px;
    height: 72px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    border-style: solid;
    border-width: 4px;
    border-image-source: linear-gradient(123deg, #ffb000 38%, #ffda87 49%, #ffb81b 56%, #ffdb8a 65%, #ffbb25 70%, #f5b933 81%);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #8520ff, #45018f), linear-gradient(123deg, #ffb000 38%, #ffda87 49%, #ffb81b 56%, #ffdb8a 65%, #ffbb25 70%, #f5b933 81%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: white;
    margin: 160px auto 120px !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff !important;
    transition: all .3s ease;
}

HTML代码 #

<div class="play">Let's Play</div>

问题原因及解决方案 #

iOS Safari对border-image与border-radius的组合支持存在兼容性缺陷，导致圆角无法正常渲染。可通过伪元素模拟渐变边框的方式解决，修改后的CSS代码如下：

.play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 325px;
    height: 72px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    color: white;
    margin: 160px auto 120px !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff !important;
    transition: all .3s ease;
    background: linear-gradient(to bottom, #8520ff, #45018f);
    padding: 4px;
    box-sizing: border-box;
    position: relative;
}

.play::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 4px;
    background: linear-gradient(123deg, #ffb000 38%, #ffda87 49%, #ffb81b 56%, #ffdb8a 65%, #ffbb25 70%, #f5b933 81%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

该方案通过伪元素和mask属性实现渐变边框效果，同时保证border-radius在iOS及其他平台均能正常生效。

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