Question

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

这是我想要的解决方案（据我所知，在现代浏览器中运行良好）：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。

Answer 2

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

jsFiddle

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

2 个答案: