javascript - 在 Chrome 中制作动画时隐藏的角落变得可见

Question

我有一个ulwithborder-radius: 10px; overflow:hidden和 inside 我有多个lis。

通常，ul角落隐藏了内部内容。但是在 Chrome 中，当使用 jQuery 为lis 设置动画（淡化）时，在动画期间，li角变得可见。

动画完成后，lis 的角将恢复为隐藏状态。

我能做些什么来防止这种情况发生？

这只发生在 Webkit 浏览器中：Chrome 和 Safari。

HTML：

<ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

CSS：

ul {
    border-radius: 10px;
    overflow: hidden;
}

Answer 1

你可以试试这个：

// give specific border-radius to first ans last li
$('li:first').css('border-radius', '0 10px 0 0');
$('li:last').css('border-radius', '0 0 10px 0');

注意你也可以使用 CSS

DEMO 展示了一个示例动画