Can someone help me understand a way of adding rounded corners top left and top right of the current page link below? I have used jQuery corners but this doesnt work in IE very well... I was looking to use PNG. The space between the corners should be white. The PNG would be transparent letting whatever image was below to show through.
<ul>
<li class="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Create Account</span></a></li>
开发者_StackOverflow<li><a href="#"><span>Order a Catalogue</span></a></li>
<li><a href="#"><span>Distributors</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
<li><a href="#"><span>Login</span></a></li>
</ul>
Any help would be greatly appreciated.
Draw your rounded rectangle in something like Paint.NET (make sure you have a transparent background!) and make it the exact width of the LI
. Give it more than enough height so that you can cut off the button rounded corners and it will still be tall enough to fill the LI
. Cut off the bottom rounded corners, crop accordingly, and save it as a PNG. Set it as a background image on the element with CSS...
ul li.current {
background:url(../images/nav-current.png) no-repeat;
}
Note: if you use a background color on the LI
, it will bleed through the transparent part of the rounded corners, which is not good.
Moving forward... you can just use the CSS3 border-top-left-radius
and border-top-right-radius
along with background-color
(no images!), but these are not supported in IE8 and older.
Hey friend to apply border radius that works in IE also you have to apply border-radius.htc file and you can apply it to your CSS like this one. In my project i am using it on Div tag but you can use it whereever you want.
div
{
-moz-border-radius: 10px;
background: #D4D0C8;
border: 1px solid #808080;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
you will find border-radius.htc file on google also. If you can provide your emailid then i can mail it to you if you want
精彩评论