切换到gatsby-plugin-image后，CSS Border Radius在Safari中不起作用

Question

CSS Border Radius在切换到gatsby插件图像后在Safari中不起作用

在我的笔记本电脑上，我可以看到图像的边界半径，但它似乎在iphone或iPad上不起作用。(即，图像仅在iPhone/iPad上是正方形的，我没有看到边界半径：图像上应用了25px(

编辑11-24：很抱歉，这是我使用的样式组件的代码片段

export const MyImageContainer = styled(GatsbyImage)`
cursor: pointer;
border-radius: 25px;
`

Answer 1

是的，这是一个旧的"bug"。这个css破解应该可以修复它。

-webkit-mask-image: -webkit-radial-gradient(white, black);

Answer 2

在迁移到gatsby插件映像后，我在边界半径方面遇到了类似的问题。

不确定这是否能解决您的问题，您可能需要添加更多详细信息，一些代码片段会有所帮助。

我正在为我的项目使用样式组件。我的解决方案是瞄准img

例如

export const MyImageVariable = styled(GatsbyImage)`
border-radius: 50%;
img {
border-radius:50%;
}
`