圓角沒有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/