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