圆角没有JavaScript或CSS3

Question

我有一个导航菜单，其中链接的悬停状态看起来像这样，

如您所见，橙色背景上有一个圆角背景。 客户已要求该功能可通过IE6正常运行（它们尚未处于可以升级的阶段）。 现在我是最近才开始进行网络开发的，所以我还没有学习过实现这种效果的旧技术，请给我一些启发？ 下面是我的代码，目前我正在使用CSS3。

#navPrimary {
        background:#de4702;
        height:37px;
        margin:0px auto;
        width:517px;
        padding:5px 0px 0px 0px;
        display:block;
        overflow:hidden;
    }

        #navPrimary li {
            width:252px;
            float:left;
            display:block;
            height:100px;
            list-style-type:none;
            text-align:center;
            margin:0px 0px 0px 8px;
        }

            #navPrimary li.first {
                width:67px;
                padding:0px 14px 0px 14px;
                display:block;
                margin:0;
            }

            #navPrimary .last {
                width:154px;
            }

            #navPrimary li a {
                color:#fff;
                font-weight:bold;
                text-decoration:none;
                display:block;
                height:27px;
                padding:10px 0px 0px 0px;

            }

                #navPrimary li a:hover {
                    color:#de4702;
                    background:#fff;
                    -moz-border-radius:10px 10px 0px 0px;
                    -webkit-border-radius:10px 10px 0px 0px;
                    border-radius:10px 10px 0px 0px;
                }

<ul id="navPrimary">

      <li class="first"><a href="/" title="#request.sitename# | Home">Home</a></li>

      <li><a href="##" title="Free Admission">Free Admission </a></li>

      <li class="last"><a href="#request.public_vroot#index.cfm?fuseaction=game.terms" title="Terms &amp; Conditions">Terms &amp; Conditions</a></li>

    </ul>

Answer 1

实现此目的的技术称为滑动门 。 在此处了解更多信息。
它基本上是关于在两个元素（门的两个部分）上使用图像。一个在左侧，另一个在右侧。

Answer 2

这将需要一些跨度和图像，但是使用css滑动门技术可以获得相同的效果。 在此处查看此列表以外的文章： http : //www.alistapart.com/articles/slidingdoors/

Answer 3

您也可以尝试使用此css3pie ，其中广告css3标签支持IE6至IE8

Answer 4

这可能对您不起作用，但是如果您需要圆角并且所有四个角都具有相同的半径，则可以使其与CSS3 PIE一起使用：

http://css3pie.com/

同样，这仅在您所有的角都相同的半径下才有效。

Answer 5

如果您不选择JavaScript的唯一原因是因为您认为JavaScript框架不支持IE6，那么您是否签出了RaphaelJS（http://raphaeljs.com/）？

RaphaelJS是一个图形库，支持所有主要浏览器， 包括 IE6。

Answer 6

您也可以查看不需要圆角或图像的JavaScript的另一种纯CSS解决方案。 http://www.spiffycorners.com/