Question

我原本面对这个常见问题......

stackoverflow.com/css-border-radius-not-trimming-image-on-webkit

所以我跟着上面问题的小提琴解决了这个问题。

但是当我徘徊时，我想在这个标记内部设置一个div，所以我添加了这个css和jquery ......

但是现在当我悬停这个元素时，动画就会发生，我失去了所有的边界半径！

Aaaagghhh！为什么会这样？??

中看到它

<span class="outer">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</span>

\

span.outer{
    position:relative;
    width: 100px;
    height: 100px;
    display: block;
    cursor: pointer;
    float: left;
    margin: 15px
}

div.outer {   
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-border-radius: 6px;
}

.inner {
    background:red;
    height:100px;
    width:300px;
    position: relative;
    background: #e6f0a3;
}

\

$("span.outer").hover(function() {
    $(this).find('.inner').animate({
        left: '-200px'
    }, 100, function() {
        // Animation complete.
    });
}, function() {
    $(this).find('.inner').animate({
        left: '0'
    }, 100, function() {
        // Animation complete.
    });
});

Answer 1

您忘记为外部div添加边框了！

div.outer {   
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-border-radius: 6px;
    border: white 2px solid;
}

我是对的吗？

演示：forked fiddle

边界半径内的jQuery动画div。阻止边界半径在动画时丢失。小提琴

1 个答案: