jquery - 如何使用 jScrollPane(jquery 插件)应用边框半径

Question

我想将 Border-radius Css 属性应用到 jScrollPane分区。

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

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

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

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

提前致谢'

Answer 1

您可以将文章设置为绝对位置，将其溢出设置为隐藏，但这在 Chrome/Safari 中不起作用，但有一个修复程序:CSS masks

您的 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);

}

​

jsFiddle

我还应该提到的是，我通过遇到 similar question 发现了这一点。 .