html - 为什么我的背景渐变在 Mac 和 iOS 上超出了边界？

Question

我有一个带有渐变的圆形图像旋转木马，因此当放置在图像上时可以轻松阅读白色文本。有时，渐变不遵循 border-radius 并在其默认方形中延伸超过边界。实际上，我无法在自己的 Mac 上重现这一点，但我的一位设计师表示，这种情况在她的 Mac 和 iPhone 上经常发生:

这是我用于图像和渐变的 CSS:

.carousel-image-container {
        position: relative;
        padding: 0px;
        border-radius: 50%;
        border: 6px solid white;
        cursor: pointer;
    }

    .carousel-image-container img {
        display: block;
        width: 100%;
        max-width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
        border-radius: 50%;
    }

    .carousel-image-container::after {
        display: block;
        position: relative;
        background-image: linear-gradient(to bottom, rgba(69, 72, 77, 0.07) 5%, rgba(69, 72, 77, 0.1) 8%, rgba(0, 0, 0, 1) 100%);
        margin-top: -300px;
        height: 300px;
        width: 100%;
        content: '';
    }

以前有没有人遇到过这个/有人能帮我让它不再发生吗？

Answer 1

看起来你正在申请 border-radius只给你的<img>但不是 :after伪元素。

.carousel-image-container:after {
  border-radius: 50%;
}

应该可以解决您的问题。如果没有，您需要提供 [mcve] 以便我实际检查您拥有的内容。

另一个可能的解决方法是:

.carousel-image-container{
  overflow: hidden;
}