这是我要修改的 slider : http://webkunst.comeze.com/
这是我想要实现的带边框的溢出:
问题是我已经尝试了所有方法来使图像与容器 overflow:hidden 一起工作,但这是不可能的,我已经尝试了所有容器 div 的相对位置等等。
有人能帮帮我吗?透明边框不是必须的,但最重要的是让溢出隐藏与边框一起工作。
这是标记:
<div id="home_slider">
<ul id="slides">
<li class="home_slide"><img src="images/slide1.jpg" alt=""></li>
<li class="home_slide"><img src="images/slide2.jpg" alt=""></li>
<li class="home_slide"><img src="images/slide3.jpg" alt=""></li>
<li class="home_slide"><img src="images/slide4.jpg" alt=""></li>
</ul>
</div>
和 CSS:
#home_slider {
margin: 0 auto;
width: 880px;
height: 416px;
position: relative;
z-index: 5;
overflow: hidden;
}
#home_slider ul#slides {
list-style: none;
position: relative;
overflow: hidden;
border-radius: 20px;
}
#home_slider ul#slides li {
margin: 0;
width: 900px;
height: 416px;
}
.home_box {
margin-top: 30px;
float: right;
}
.home_box .home_image {
float: left;
border: 3px solid #6f6f6f;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
overflow: hidden;
margin-left: 13px;
}
我从本教程中获得了 slider : http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle
最佳答案
您只需将 border-radius
应用于 #home_slider
div 而不是 #home_slider ul#slides
。对于透明边框,您可以使用 rgba 并且您还需要将其应用于 #home_slider
:
#home_slider {
margin: 0 auto;
width: 880px;
height: 416px;
position: relative;
z-index: 5;
overflow: hidden;
border-radius: 20px; /* add this */
border: 15px solid rgba(255, 255, 255, 0.5); /* add something like this for the transparent border */
}
编辑: 当元素不是position:static
时,Chrome 似乎无法将内容剪辑到border-radius
。然而,如果你可以在没有透明边框的情况下生活,那么你可以将它添加到上面的相同规则中以获得圆 Angular ,但你必须删除边框:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
关于php - 在 slider 图像上溢出隐藏边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13426118/