css - CSS 中的导航栏圆形图像

Question

我正在用 CSS 创建一个导航栏。导航栏有一个背景图像，我希望图像有圆 Angular 。我已经尝试过其他东西，比如 -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%;
}

如何给它圆 Angular ？

谢谢!

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