[英]Rounded corners in bxSlider
I need rounded corners in bxSlider. 我需要bxSlider中的圆角。
I have this code but with js it isn't work: 我有此代码,但使用js无效:
#slider_mid {
width: 940px;
height:374px;
margin:0 auto;
border-radius: 100px;
overflow: hidden;
background:#093;
}
add this at the end of your bxSlider CSS file 在bxSlider CSS文件的末尾添加它
.bx-wrapper, .bx-viewport, .bx-wrapper img {
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
I know this is old, but I ran into the issue as well and fixing it was simpler than you may think. 我知道这很老了,但是我也遇到了这个问题,并且解决它比您想象的要简单。 The problem is BxSlider adds a z-index of 50 to its elements. 问题是BxSlider向其元素添加了50的z索引。
Add a higher z-index to your element with the border-radius and ta-da! 使用border-radius和ta-da为元素添加更高的z-index! (I add a position as well because z-index won't work on non-positioned elements.) (我还添加了一个位置,因为z-index不适用于未定位的元素。)
#slider_mid {
width: 940px;
height:374px;
margin:0 auto;
border-radius: 100px;
overflow: hidden;
background:#093;
position: relative;
z-index: 100;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.