position：absolute在border-radius和overflow：hidden [英] position:absolute within border-radius and overflow:hidden
本文介绍了position：absolute在border-radius和overflow：hidden的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在webkit浏览器中遇到了 border-radius 的问题，并在以下URL找到了解决方案：
如何使CSS3圆角隐藏溢出在Chrome / Opera
I had a problem with border-radius in webkit browsers and found the solution at the following URL:
How to make CSS3 rounded corners hide overflow in Chrome/Opera
但是iam使用另一个元素 position：absolute; 在这里
现在我需要使标题带有圆但不知道如何
but iam using a another element with position: absolute; inside this
now I need to make the caption with rounded border too, but do not know how
注意：我不能在标题中使用另一个 border-radius 因为这将有一个动画
note: i can't use another border-radius in caption, because this will have an animation
查看代码：
<!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>
cheers
推荐答案
这是一个问题，现在我想。我可以建议你使用fadeIn（）相反。查看演示
这篇关于position：absolute在border-radius和overflow：hidden的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
