如何解决CSS 掩码/-webkit-mask 在 safari 中不起作用
我有一个项目,我尝试绘制一个带有渐变边框的圆。我已经做到了,所以它可以在 Chrome 中使用。但是样式在 safari 中不起作用。我不知道为什么它不起作用。我为 Safari 添加了 mask:
版本。
.gradient-circle {
height: 10rem;
width: 10rem;
--b: 5px;
/* border width*/
display: inline-block;
margin: 10px;
z-index: 0;
position:relative;
}
.gradient-circle:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--c,linear-gradient(to top,#5454d4,rgba(249,116,104)));
mask: linear-gradient(0deg,#fff,transparent 96%),radial-gradient( farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b))) content-box;
-webkit-mask: linear-gradient(0deg,#fff calc(100% - var(--b))) content-box;
mask-composite: intersect;
-webkit-mask-composite: destination-in;
border-radius: 50%;
padding: 1px;
}
<span class="gradient-circle"></span>
解决方法
这是一个没有 mask-composite
的不同想法,我猜这是罪魁祸首。只需考虑一个额外的层,即可独立应用两个蒙版
.gradient-circle {
height: 10rem;
width: 10rem;
--b: 5px; /* border width*/
display: inline-block;
margin: 10px;
z-index: 0;
position: relative;
}
.gradient-circle div,.gradient-circle div:before {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.gradient-circle div {
-webkit-mask: linear-gradient(0deg,#fff,transparent 96%);
}
.gradient-circle div:before {
content: "";
background: var(--c,linear-gradient(to top,#5454d4,rgba(249,116,104)));
-webkit-mask: radial-gradient(farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b))) content-box;
border-radius: 50%;
padding: 1px;
}
<span class="gradient-circle">
<div></div>
</span>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。