CSS中的导航栏圆角图像

Question

我正在CSS中创建一个导航栏。导航栏有背景图像，我希望图像有圆角。我已经尝试了-moz之类的其他内容，但到目前为止还没有任何工作。这是我的CSS：

ul{
    background-image: url(nav_bar.png); height: 60px;width: 35%;
    background-repeat: no-repeat;
    position: relative;
    margin:1;
    padding:0;
    left: 30%;
}

我怎样才能给它圆角？

谢谢！

Answer 1

将border-radius与background-clipping: padding-box;一起使用。两个属性都需要特定于浏览器的前缀，除非您包含PrefixFree。

之类的内容

您添加的CSS看起来像：

ul {
    -moz-border-radius: 10px; /*increase the value to make it more round*/
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clipping: padding-box;
    -webkit-background-clipping: padding-box;
    background-clipping: padding-box;
}