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

Question

在我的笔记本电脑上我可以看到图像的边界半径，但它似乎不适用于 iphone 或 iPad。（即图像仅在 iPhone / iPad 上是方形的，我没有看到 border-radius:25px 应用于图像）

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

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

Answer 1

是的，那是旧的'bug'。这个 css hack 应该可以解决它。

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

Answer 2

我在迁移到 gatsby-plugin-image 后遇到了类似的边界半径问题。

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

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

例如

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

CSS Border Radius doesn't work in Safari after switching to gatsby-plugin-image