为wordpress主题创建一个圆形的css

Question

如何为我自己的自定义wordpress主题制作顶部栏导航中的圆形css（尤其是注册菜单，登录菜单和购物车图标），如下所示：

它的style.css仅适用于顶栏导航：

    .main-navigation2 {
    float: none;
    height: 50px;
    background: #fff;

}

.main-navigation2 ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation2 li {
    float: right;
    position: relative;
}

.main-navigation2 a {
    padding: 0 20px 0 20px;
    display: block;
    text-decoration: none;
    line-height: 50px;
    color: #000;
    font-family: sans-serif;
    background: #ff3400 url(img/arrow.png) no-repeat scroll right / 20% 20%;
}

.main-navigation2 ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

.main-navigation2 ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation2 ul ul a {
    width: 200px;
    line-height: 40px;
    padding: 0 20px;
    display: block;

}

.main-navigation2 ul ul li {

}

.main-navigation2 li:hover > a,
.main-navigation2 li.focus > a {
background: #e6370a;

}

.main-navigation2 ul ul :hover > a,
.main-navigation2 ul ul .focus > a {
}

.main-navigation2 ul ul a:hover,
.main-navigation2 ul ul a.focus {
}

.main-navigation2 ul li:hover > ul,
.main-navigation2 ul li.focus > ul {
    left: auto;
}

.main-navigation2 ul ul li:hover > ul,
.main-navigation2 ul ul li.focus > ul {
    left: 100%;
}

.main-navigation2 .current_page_item > a,
.main-navigation2 .current-menu-item > a,
.main-navigation2 .current_page_ancestor > a {
}


/* Small menu. */
.menu-toggle,
.main-navigation2.toggled ul,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
        display: none;
    }
    .main-navigation ul {
        display: block;
    }
    .main-navigation2 ul {
        display: block;
    }
}

我已经尝试了一切，但仍然没有运气

更新了＃1：

我已经将“border-radius”代码添加到style.css中，如下所示：

.main-navigation2 a {
padding: 0 20px 0 20px;
display: block;
text-decoration: none;
line-height: 50px;
color: #000;
font-family: sans-serif;
background: #ff3400 url(img/arrow.png) no-repeat scroll right / 20% 20%;
border-radius: 0px 0px 0px 124px;
-moz-border-radius: 0px 0px 0px 124px;
-webkit-border-radius: 0px 0px 0px 124px;
border: 6px solid #ffffff;
}

但仍然没有运气

Answer 1

将border-radius用于您想要制作圆形的元素

例如。注册菜单：

border-radius: 0 0 0 50em;，最后一个图标应为border-radius: 0 0 8px 0;

或者您可以使用http://border-radius.com/，http://www.cssmatic.com/border-radius

等边框半径生成器工具