为什么我的背景渐变在Mac和ios上越过边界？

Question

我有一个圆形图像的旋转木马，上面有渐变，因此放置在图像上时可以轻松读取白色文字。有时，渐变不会沿着边界半径延伸，并且会以超过边框的默认方形形状延伸。我实际上无法在我自己的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;
}

Answer 2

Add border-radius also .carousel-image-container::after, Like

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