Css 位置：绝对边界半径内，溢出：隐藏_Css_Webkit

Css 位置：绝对边界半径内，溢出：隐藏

css

Css 位置：绝对边界半径内，溢出：隐藏,css,webkit,Css,Webkit,我在webkit浏览器中遇到了边界半径问题，并在以下URL找到了解决方案：但我使用另一个元素，位置为：绝对在这里面现在，我需要使标题与圆形边框太多，但不知道如何注意：我不能在标题中使用另一个边界半径，因为这将有一个动画请参见以下代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <h

我在webkit浏览器中遇到了边界半径

问题，并在以下URL找到了解决方案：

但我使用另一个元素，位置为：绝对在这里面
现在，我需要使标题与圆形边框太多，但不知道如何
注意：我不能在标题中使用另一个边界半径
，因为这将有一个动画
请参见以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Problem</title>  
    <style type="text/css"> 
    img {
        border: 0;  
    }

    a {
        text-decoration: none;  
    }

    .wrap-events {
        float: left;
        position: relative;
        width: 500px;
        height: 250px;
    }

    .events {
        overflow: hidden;

        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    }

    .caption {
        position: absolute;
        width: 100%;
        bottom: 0;
        color: #FFFFFF;
        background-color: #151515;
        font: 12px "Arial", Helvetica, sans-serif;

        opacity: 0.6;

        border-radius: 0 0 50px 50px; /* add border-radius to caption */
    }

    .caption p {
        padding: 10px;
    }
    </style>
</head>
<body>
    <div class="wrap-events">
        <div class="events">
            <a href="#">
                <img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image">
            </a>
            <div class="caption">
                <p>This is a caption</p>
            </div>
        </div>
    </div>
    <button id="slide">Slide It!</button>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $('#slide').click(function(){
            $('.caption').hide().slideDown(2000);
        });
    </script>
</body>
</html>


问题
img{
边界：0；
}
a{
文字装饰：无；
}
.wrap事件{
浮动：左；
位置：相对位置；
宽度：500px；
高度：250px；
}
.事件{
溢出：隐藏；
-webkit边界半径：50px；
-moz边界半径：50px；
边界半径：50px；
}
.标题{
位置：绝对位置；
宽度：100%；
底部：0；
颜色：#FFFFFF；
背景色：#151515；
字体：12px“Arial”，Helvetica，无衬线；
不透明度：0.6；
边框半径：0 0 50px 50px；/*在标题中添加边框半径*/
}
.标题p{
填充：10px；
}
这是一个标题
滑动它！
$（“#幻灯片”）。单击（函数（）{
$（'.caption'）.hide（）.slideDown（2000）；
});

干杯
我想现在这是个问题。我建议您改用fadeIn（）。请看
我可以为您提供一个服务吗？如果我们能看到你在做什么，我们会更容易帮助你。对我来说似乎没问题，谢谢@DavidThomas@Starx边界半径为的标题问题可以在动画的一半中看到，标题与我想要的图像非常不一致，但仅适用于IE9和FF。。。铬合金、狩猎、无圆边歌剧。