bxSlider中的圆角

Question

我需要在bxSlider中使用圆角。

我有这个代码但是使用js它不起作用：

#slider_mid {
    width: 940px; 
    height:374px;
    margin:0 auto;
    border-radius: 100px; 
    overflow: hidden; 
    background:#093;
}

Answer 1

在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;
}

Answer 2

我知道这已经过时了，但我也遇到了这个问题并且修复它比你想象的要简单。问题是BxSlider在其元素中添加了50的z-index。

使用border-radius和ta-da为元素添加更高的z-index！ （我也添加了一个位置，因为z-index不会对非定位元素起作用。）

#slider_mid {
    width: 940px; 
    height:374px;
    margin:0 auto;
    border-radius: 100px; 
    overflow: hidden; 
    background:#093;
    position: relative;
    z-index: 100;
}