我正在尝试创建一个带有渐变边框的自定义按钮。此时，我得到了在Chrome和Firefox中工作的按钮。
我已经跟随了一个在线指导如何创建一个渐变的自定义边框，也是圆角的。指南的链接可以在这里找到：documentation。
但由于某些原因，相同的样式在Safari中不起作用。我不知道为什么会这样。
这里是我用来创建按钮的CSS代码。我还在底部包含了一个样式相同的片段。请注意，代码段有一些额外的类和CSS属性，只是为了使其正确显示。
.rainbow-gradient-border {
position: relative;
border-radius: 0.25rem;
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.rainbow-gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.25rem;
padding: 0.1rem;
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
null
body, .container{
width: 100%;
height: 100%;
background-color: black;
}
.container{
background-color: black;
}
.rainbow-gradient-border {
position: relative;
color: white;
width: 10rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.25rem;
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.rainbow-gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.25rem;
padding: 0.1rem;
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}<div class="container">
<div class="rainbow-gradient-border">
<p>Log In</p>
</div>
</div>null
您可以通过更简单的方式实现这一点，而不需要使用掩码。我使用这个工具添加前缀。
null
body, .container{
width: 100%;
height: 100%;
background-color: black;
color: white;
}
.rainbow-gradient-border {
position: relative;
}
.outie{
display: inline-block;
background: -webkit-gradient(
linear,
left top, right top,
from(#4d3d8f),
color-stop(23%, #df67ed),
color-stop(65%, #e24c26),
color-stop(84%, #f18823),
to(#3aa6c2)
);
background: -o-linear-gradient(
left,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
border-radius: 4px;
padding: 2px;
width: 10rem;
border-radius: 0.25rem;
-webkit-box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.innie{
display:inline-block;
width: 100%;
background: black;
padding: 15px 0px;
text-align: center;
}<div class="container">
<div class="rainbow-gradient-border">
<span class="outie">
<span class="innie">
Log In
</span>
</span>
</div>
</div>