元素'；css掩码图像后缺少边框

我已经将svg作为掩码图像应用于某些div。这样做之后，他们的边界就消失了

。图标{
填充物：5px；
边框：5px实心#000；
宽度：150px；
高度：150像素；
显示：内联块；
-webkit掩码：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg)无重复50%50%；
-webkit掩码大小：包含；
掩码图像：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg)无重复50%50%；
遮罩尺寸：包含；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}

---

我正在使用一个额外的div包装在包含掩码的div周围创建边框

我在代码中添加了注释来解释我的更改

.maskborder{
宽度：150px；
高度：150像素；
边框：5px实心#000；
位置：相对位置；
浮动：左；
}
.二号{
左边距：10px；/*更改此值以适应第一个框和第二个框之间的间距*/
}
.图标{
填充物：5px；
边框：5px实心#000；
宽度：150px；
高度：150像素；
显示：内联块；
掩码：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg)无重复50%50%；
-webkit掩码：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg)无重复50%50%；
遮罩尺寸：包含；
-webkit掩码大小：包含；
位置：绝对位置；
变换：平移（-10px，-10px）/*以偏移5px边框宽度，以便图标可以正确居中*/
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}

---

原因的答案很简单：掩码应用于所有元素，包括其边框。即使有

框阴影

为了避免这一点，要么使用另一个元素创建边界，要么考虑多个掩码来保持边界可见：

。图标{
填充物：5px；
边框：5px实心#000；
宽度：150px；
高度：150像素；
显示：内联块；
-网络工具包掩码：
线性梯度（#fff 0 0）顶部/100%5px，
线性梯度（#fff 0 0）底部/100%5px，
线性梯度（#fff 0 0）左/5px 100%，
线性梯度（#fff 0 0）右/5px 100%，
网址(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg)中心/包含；
-webkit掩码重复：无重复；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}

---

因此，经过一段时间的搜索，我终于找到了mask的border属性，似乎需要使用另一个svg作为正方形来创建边框

我将以下属性添加到

.icon

：

-webkit-mask-box-image: url(https://www.flaticon.com/svg/static/icons/svg/33/33879.svg) 10 repeat;
mask-border: url(https://www.flaticon.com/svg/static/icons/svg/33/33879.svg) 10 repeat;

事实上，我在这里找到了诀窍：并根据您的情况对其进行了调整

我想您可以很容易地创建一个带有合适边框的svg正方形，然后将其设置进去

演示

。图标{
填充物：5px；
边框：5px实心#000；
宽度：150px；
高度：150像素；
显示：内联块；
-webkit掩码：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg)无重复50%50%；
-webkit掩码大小：包含；
掩码图像：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg)无重复50%50%；
遮罩尺寸：包含；
-webkit掩码框图像：url(https://www.flaticon.com/svg/static/icons/svg/33/33879.svg)重复10次；
掩码边框：url(https://www.flaticon.com/svg/static/icons/svg/33/33879.svg)重复10次；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}

对于那些没有看到问题的人，Chrome不支持没有供应商前缀的

掩码

，因此您需要使用Firefox了解更多详细信息：嗯，掩码适用于所有元素，包括其border@Sakis我会尝试通过在遮罩的div周围添加一个额外的div来解决这个问题。请看下面我的答案。希望这是期望的结果。这是否回答了你的问题？谢谢尽管我正在寻找一个基于css的解决方案，或者解释为什么会发生这种情况。答案是基于CSS的。不能向蒙版元素添加普通的旧CSS边框。必须应用遮罩边框图像。或者在您的情况下，因为您需要纯边框CSS，所以我们必须将其应用于父div并将其放置在其顶部。希望这对你有所帮助，这是一个非常酷的方法。但这只适用于没有边界半径的正方形边界，不？@MaxiGui它可以使用边界半径。我只需要调整梯度，并考虑径向覆盖的辐射，它似乎更简单，比正式使用我所发送的或至少更灵活的工作在铬，但不是在Firefox.Indeed。但这是真正的功能。但即使这是我的答案，我认为@TemaniAfif的答案比我的好得多，也更灵活。