jquery - 如何使用 jScrollPane（jquery 插件）应用 Border-radius

Question

我想将 Border-radius Css 属性应用于jScrollPane div。

这是我想要的解决方案（据我所知，它在现代浏览器中运行良好）：http: //jsfiddle.net/dF9ng/

但是我想将此应用于 jScrollPane div。这是我的尝试：http: //jsfiddle.net/SWtVC/

它似乎在 Firefox 中正常工作。但是在 Chrome 中它根本不起作用。

这是 Chrome 错误吗？它在其他浏览器中是否正常工作？如果是插件错误，有人可以为我提供修复或其他可能的解决方案吗？

提前致谢'

Answer 1

您可以将文章设置为绝对位置，将其溢出设置为隐藏，但这在 Chrome/Safari 中不起作用，但有一个解决方法：CSS 掩码

您的 HTML 标记保持原样，这是您的新 CSS：

article{
    border:1px solid black;
    margin:30px;
    border-radius:50px;
    width:300px;
    height:300px;
    overflow:hidden;
    position:absolute;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

}

​</p>

jsFiddle

我还应该提到，我是通过遇到类似的问题发现的。

Answer 2

看看我的小提琴。我想这就是你想要的。

jsFiddle