[英]CSS - gradient border not working in safari
I am trying to create a custom button with a gradient border.我正在尝试创建一个带有渐变边框的自定义按钮。 At this point I got the button to work in both Chrome and Firefox.
在这一点上,我得到了在 Chrome 和 Firefox 中工作的按钮。
I have followed an online guide on how to create custom borders with a gradient which are also rounded.我遵循了关于如何创建带有圆形渐变的自定义边框的在线指南。 The link to the guide can be found here: documentation .
可在此处找到该指南的链接:文档。
But for some reason the same styling does not work in Safari.但由于某种原因,相同的样式在 Safari 中不起作用。 I do not know why this is the case.
我不知道为什么会这样。
Here is the CSS code I use in order to create the button.这是我用来创建按钮的 CSS 代码。 I have also included a snippet with the same style at the bottom.
我还在底部包含了一个具有相同样式的片段。 Note that the snippet has a few extra classes and CSS properties just to get it to show properly.
请注意,该片段有一些额外的类和 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;
}
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>
You can achieve this in a more simple way, without using masks.您可以通过更简单的方式实现此目的,而无需使用遮罩。 I used this tool to add the prefixes.
我使用这个工具来添加前缀。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.