CSS3 PIE.htc を使わないで書くタブ

先日、PIE.htc 使用で書くタブを書きましたが、Google Chrome では、htcコンポーネントを
動作させる behavior の記述は無効なので、
PIE.htc を使用しないものに書き直したものをここに書きます。

【HTML記述について】
・タブ全体は、id属性でなく、固定名class属性を指定した <div class="tabBox">　という絶対の約束、
・タブの ul は、固定名class属性を指定した <ul class="tabs">
・タブの li は、独自の属性でタブの順番を、、<li data-tabid="1">
・タブのコンテンツは、<div class="tab-content"></div>

<div class="tabBox">
   <ul class="tabs">
      <li data-tabid="1"><a href="#">Tab One</a></li>
      <li data-tabid="2"><a href="#">Tab Two</a></li>
      <li data-tabid="3"><a href="#">Tab Three</a></li>
   </ul>
   <div class="tab-content">
   </div>
</div>

【jQuery で指定】　　以下の仕様の関数
/**
* tabSetting(urls, errorHtml)
* @param urls ロードするURLの配列、
* @param errorHtml ロード失敗時のエラーコンテンツ
*/
　　で呼び出し。。。

<script type="text/javascript">
$(function(){
   tabSetting(["sub/one.html", "sub/two.html", "sub/three.html"], "<h1>Page Load Error!</h1>");
});
</script>

【CSS の記述】
@CHARSET "UTF-8";

.tabBox .tabs {
   margin: 0;
   padding: 0 10px;
   overflow: hidden;
   margin-bottom: -1px;
   height: 36px;
}
.tabBox .tabs li {
   float: left;
   list-style: none;
   margin: 0;
   padding: 4px 5px 0px 5px; /* [上][右][下][左] */
   height: 32px;
   overflow: hidden;
   position: relative;
   z-index: 1;
   border-bottom: 1px solid #ffffff;
}
.tabBox .tabs li.selected {
   z-index: 3;         /* 重なり順序 */
}
.tabBox .tabs a {
   float: left;
   height: 32px;
   line-height: 32px;
   padding: 0 10px 0 10px;
   color: #000000;
   text-decoration: none;
   background-color: #e0e0e0;
   border: 1px solid #707070;
   /* 角丸 */
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
   /* シャドウ */
   -webkit-box-shadow: #707070 0px 0px 4px 0px;
   -moz-box-shadow: #707070 0px 0px 4px 0px;
   box-shadow: #707070 0px 0px 4px 0px;
}
.tabBox .tabs .selected a {
   background-color: #ffffff;
   border-top: 4px solid #ff0000;
   border-bottom: 0;
}
.tabBox .tabs a:hover {
   background: -webkit-gradient(linear, 0 0, 0 70%, from(#eeeeff), to(#ffffff));
   background: -webkit-linear-gradient(#eeeeff, #ffffff 70%);
   background: -moz-linear-gradient(#eeeeff, #ffffff 70%);
   background: -ms-linear-gradient(#eeeeff, #ffffff 70%);
   background: -o-linear-gradient(#eeeeff, #ffffff 70%);
   background: linear-gradient(#eeeeff, #ffffff 70%);
   -pie-background: linear-gradient(#eeeeff, #ffffff 70%);
   border-top: 4px solid #ff0099;
}
.tabBox .tab-content {
   width: 400px;
   height: 200px;
   clear: left;
   position: relative;
   z-index: 2;                    /* 重なり順序 */
   padding: 32px 16px 32px 16px;  /* [上][右][下][左] */
   border: 1px solid #707070;
   background-color: #ffffff;
   /* 角丸の場合は活かす */
   border-top-color: #ffffff;   /* background-color と合わせる */
   /* 角丸 */
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   /* シャドウ */
   -webkit-box-shadow: #707070 1px 0px 4px 1px;
   -moz-box-shadow: #707070 1px 0px 4px 1px;
   box-shadow: #707070 1px 0px 4px 1px;
}

【JavaScript 関数】


$(function(){
/**
 * tabSetting(urls, errorHtml)
 * @param urls ロードするURLの配列、
 * @param errorHtml ロード失敗時のエラーコンテンツ
 */
tabPieSetting = function(urls, errorHtml){
   var spinner = new Spinner({top: '30px', left: '30px', length: 6, lines: 12 });
   $('div[class=tab-content]').append(spinner.spin().el);
   $('ul[class=tabs]').children().each(function(i, obj){
      $(obj).click(function(){
         if (!$(this).hasClass('selected')){
            $('div[class=tab-content]').children().remove();
            $('div[class=tab-content]').append(spinner.spin().el);
            $('ul[class=tabs]').children().each(function(j, o){
               $(o).removeAttr('class');
            });
            $(this).attr('class', 'selected');
            $('div[class=tab-content]').load(urls[$(this).data("pietabid") - 1], function(data, status, xmlHttpRequest){
               if (status=="error"){
                  $('div[class=tab-content]').children().remove();
                  $('div[class=tab-content]').html(errorHtml);
               }
            });
         }
      });
   });
   $('li[data-tabid=1]').addClass("selected");
   $('div[class=tab-content]').load(urls[0], function(data, status, xmlHttpRequest){
      if (status=="error"){
         $('div[class=tab-content]').children().remove();
         $('div[class=tab-content]').html(errorHtml);
      }
   });
};
});


ＣＳＳを調整して、、

角丸、シャドウの例、、

角丸を使わない例、