Html 底部边缘的圆角曲线| CSS

嗨，我需要下面的图像像曲线在底部工作在IE

这是我提到的一个链接。这在chrome中效果很好。但不适合我

.tabrow li {
    background:      -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:     -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:    -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
    text-shadow: 0 1px #FFF;
    margin: 0 -5px;
    padding: 0 20px;
}
http://css-tricks.com/examples/RoundOutTabs2/

---

因此，请让我知道为了在IE中工作，我必须更改哪些属性

您可以将

边界半径

属性用于此类圆角

.tabrow li
{
  border-radius:5px
}

它适用于所有最新的浏览器，包括IE-9和更高版本。但是如果你想支持旧的IE版本，那么你需要像这样做

css

.tabrow {
    font-family: verdana;
    font-size: 12px;
    height: 26px;
    line-height: 24px;
    list-style: none outside none;
    margin: 200px 0 20px;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
}
.tabrow li {
    background: -moz-linear-gradient(center top , #ECECEC 50%, #D1D1D1 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #AAAAAA;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), 0 1px 0 #FFFFFF inset;
    display: inline-block;
    margin: 0 -5px;
    padding: 0 20px;
    position: relative;
    text-shadow: 0 1px #FFFFFF;
    z-index: 0;
}
.tabrow a {
    color: #555555;
    text-decoration: none;
}
.tabrow li.selected {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom-color: #FFFFFF;
    color: #333333;
    z-index: 2;
}
.tabrow:before {
    border-bottom: 1px solid #AAAAAA;
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.tabrow li:before, .tabrow li:after {
    border: 1px solid #AAAAAA;
    bottom: -1px;
    content: " ";
    height: 5px;
    position: absolute;
    width: 5px;
}
.tabrow li:before {
    border-bottom-right-radius: 6px;
    border-width: 0 1px 1px 0;
    box-shadow: 2px 2px 0 #D1D1D1;
    left: -6px;
}
.tabrow li:after {
    border-bottom-left-radius: 6px;
    border-width: 0 0 1px 1px;
    box-shadow: -2px 2px 0 #D1D1D1;
    right: -6px;
}
.tabrow li.selected:before {
    box-shadow: 2px 2px 0 #FFFFFF;
}
.tabrow li.selected:after {
    box-shadow: -2px 2px 0 #FFFFFF;
}

$(function() {
            $("li").click(function(e) {
              e.preventDefault();
              $("li").removeClass("selected");
              $(this).addClass("selected");
            });
        });

js

.tabrow {
    font-family: verdana;
    font-size: 12px;
    height: 26px;
    line-height: 24px;
    list-style: none outside none;
    margin: 200px 0 20px;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
}
.tabrow li {
    background: -moz-linear-gradient(center top , #ECECEC 50%, #D1D1D1 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #AAAAAA;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), 0 1px 0 #FFFFFF inset;
    display: inline-block;
    margin: 0 -5px;
    padding: 0 20px;
    position: relative;
    text-shadow: 0 1px #FFFFFF;
    z-index: 0;
}
.tabrow a {
    color: #555555;
    text-decoration: none;
}
.tabrow li.selected {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom-color: #FFFFFF;
    color: #333333;
    z-index: 2;
}
.tabrow:before {
    border-bottom: 1px solid #AAAAAA;
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.tabrow li:before, .tabrow li:after {
    border: 1px solid #AAAAAA;
    bottom: -1px;
    content: " ";
    height: 5px;
    position: absolute;
    width: 5px;
}
.tabrow li:before {
    border-bottom-right-radius: 6px;
    border-width: 0 1px 1px 0;
    box-shadow: 2px 2px 0 #D1D1D1;
    left: -6px;
}
.tabrow li:after {
    border-bottom-left-radius: 6px;
    border-width: 0 0 1px 1px;
    box-shadow: -2px 2px 0 #D1D1D1;
    right: -6px;
}
.tabrow li.selected:before {
    box-shadow: 2px 2px 0 #FFFFFF;
}
.tabrow li.selected:after {
    box-shadow: -2px 2px 0 #FFFFFF;
}

$(function() {
            $("li").click(function(e) {
              e.preventDefault();
              $("li").removeClass("selected");
              $(this).addClass("selected");
            });
        });

---

@paulie:这在IE中不起作用。我需要支持所有浏览器使用图像，但根据文章“应该在任何像样的浏览器和IE 9及以上的浏览器中都可以使用。在旧浏览器中也应该可以使用（只是没有舍入）。：它是否支持IE？我添加了文件..这是我的css。。行为：url（'../supportfiles/PIE.htc'）；行为：url（'../supportfiles/ie-css3.htc'）；但还是没有得到worked@sree您使用的是哪种浏览器和版本？那么您使用的是CSS3，对吗？因为边界半径在IE 8中不起作用