Question

有人可以帮我理解在下方当前页面链接的左上角和右上角添加圆角的方法吗？我已经使用了jQuery角落，但这在IE中不能很好地工作......我当时希望使用PNG。角落之间的空间应该是白色的。 PNG将是透明的，让下面的任何图像显示出来。

<ul>
    <li class="current"><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Create Account</span></a></li>
    <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>

非常感谢任何帮助。

Answer 1

用Paint.NET之类的方法绘制圆角矩形（确保你有一个透明的背景！）并使其成为LI的精确宽度。给它足够的高度，这样你就可以切掉按钮的圆角，它仍然足够高，可以填充LI。切掉底部圆角，相应裁剪，并将其保存为PNG。使用CSS将其设置为元素上的背景图像...

ul li.current {
  background:url(../images/nav-current.png) no-repeat;
}

注意：如果你在LI上使用背景颜色，它会透过圆角的透明部分渗出，这是不好的。

前进 ...您可以使用CSS3 border-top-left-radius和border-top-right-radius以及background-color（无图像！），但这些不受支持在IE8及更早版本中。

Answer 2

嘿朋友要应用在IE中工作的边框半径，你也必须应用border-radius.htc文件，你可以像这样将它应用到你的CSS。在我的项目中，我在Div标签上使用它，但你可以随意使用它。

div
{
-moz-border-radius: 10px;
background: #D4D0C8;
border: 1px solid #808080;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}

你也会在google上找到border-radius.htc文件。如果您可以提供您的emailid，那么如果您需要，我可以将其邮寄给您

在当前页面链接上的IE中弯曲的顶角

2 个答案: