css - 当前页面中IE中的上 Angular flex

有人可以帮助我了解在下面当前页面链接的左上角和右上角添加圆角的方法吗？我使用过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>

任何帮助将不胜感激。

最佳答案

用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和更早版本不支持这些。

关于css - 当前页面中IE中的上 Angular flex ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3734728/