我正在使用 malsup 的 jQuery Corners 插件,以便在每个浏览器中都有圆角。到目前为止 - 它对我来说很好。但现在 - 它没有。它根本没有 - 我不知道如何描述它。
也许您知道在旧 IE 和现代浏览器上都有圆角的其他方法?
HTML:
<nav id="mainMenu" class="container_24">
<ul>
<li><a href="">One</a></li>
<li><a href="">Two ›</a></li>
<li><a href="">Three ›</a></li>
<li class="search">
<form action="">
<input type="text" placeholder="Search ›">
</form>
</li>
<li><a href="">‹ Help</a></li>
</ul>
</nav>
CSS(少):
nav#mainMenu {
margin-top: -9px;
background: #fafafa;
height: 62px;
border-bottom: 3px solid #e2e2e2;
-webkit-box-shadow: 0px 0px 10px 0px rgba(000, 000, 000, 0.25);
box-shadow: 0px 0px 10px 0px rgba(000, 000, 000, 0.25);
ul {
list-style: none;
margin: 0;
padding: 0;
li:last-child {
a {
border: 0;
}
}
li {
float: left;
a, input {
display: block;
font: bold 12px/62px "Source Sans Pro", Arial, sans-serif;
color: #4b4b4b;
text-transform: uppercase;
padding: 0 20px;
border-right: 1px solid #e2e2e2;
}
a:hover, input:focus {
border-bottom: 3px solid #cc624a;
text-decoration: none;
outline: 0
}
form {
input {
border: 0;
border-right: 1px solid #e2e2e2;
height: 62px;
background: transparent;
}
}
}
}
}
JS:
$('nav#mainMenu').corner('5px');
$('nav#mainMenu ul li:first-child a').corner('5px bl');
$('nav#mainMenu ul li:last-child a').corner('5px br');
我的小提琴在这里。