Question

我使用border-radius: 50%;来制作图片。默认情况下，图像模糊和缩放（带有隐藏的溢出），并且在悬停时它将删除模糊和缩放。但是，当我在元素上使用CSS转换时，它会暂时显示转换期间的溢出。

Answer 1

我相信转换时，元素会从文档流中取出，类似于影子position: relative;，并在动画完成后重新放入。

如果强制父级的z-index高于子级的figure.effect-park { background-color: #0D4C16; border-radius: 50%; z-index: 1; } figure.effect-park img { z-index: 0; opacity: 0.5; -webkit-filter: blur(1.5px); filter: blur(1.5px); -webkit-transform: scale(1.15); transform: scale(1.15); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; }，则父级应继续剪切溢出。

http://jsfiddle.net/cyvL61qx/4/

{{1}}

Answer 2

只需进行border-radius inherit

.parent {
    border-radius: 50%;
}

.parent img {
    border-radius: inherit;
}

Answer 3

我有同样的问题。把这个css放在父母身上对我有用：

private bool TimerRequirements(IOrderData orderData)
{
     DateTime arriveTime = DateTime.ParseExact(orderData.ArriveTime.ToString(), "dd-MM-yyyy hh:mm:ss:tt", CultureInfo.InvariantCulture);
     DateTime orderDate = DateTime.ParseExact(orderData.OrderDate.ToString(), "dd-MM-yyyy hh:mm:ss:tt", CultureInfo.InvariantCulture);


     if (orderData.ArriveTime != null && Convert.ToDateTime(arriveTime.Subtract(orderDate)) >= orderData.OrderDate.AddMinutes(10) ||
            orderData.ArriveTime != null && Convert.ToDateTime(arriveTime.Subtract(orderDate)) <= orderData.OrderDate.AddHours(2))
     {
         return true;
     }
     else
     {
         return false;
     }
}

在Mac和Microsoft Edge的safari，firefox和chrome上进行了测试。

Answer 4

我遇到了同样的问题，即过渡时元素的右角生长，一旦过渡结束，圆角就会重新出现。我尝试了所有上述解决方案，但均未成功（剪辑路径除外，因为edge或IE不支持它）。

然后我删除了过滤器，并且转换成功了。因此，我的解决方案是删除滤镜，以使其至少与缩放配合使用。

图像border-radius在css转换期间不起作用

4 个答案: