<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= " UTF-8 " >
<タイトル> </ TITLE>
<スタイルタイプ= " テキスト/ cssの" >
.TAB - X {
ディスプレイ：フレックス;
フレックス -方向：行優先逆転。
正当化 -contentを：フレックス終了。
パディング - 左：20ピクセル;
境界 -bottom：1ピクセル固体RGBA（0、0、0、1 ）。
.TAB - {
- のbackgroundColor：#FFF。
背景 -color：VAR（ - のbackgroundColor）。
行 - 高さ：20ピクセル;
パディング：10pxの20ピクセル;
ボーダー -radius：16pxに16pxに0 0 ;
フィルタ：ドロップ -shadow（0 -1px 1ピクセルRGBA（0、0、0、1 ））。
位置：相対;
}
/ * 创建外侧圆弧
.TAB * /
- ::前に、
.TAB - {の後に::
コンテンツ：'' ;
位置：絶対;
下：0 ;
幅：16pxに;
高さ：16pxに;
}
.TAB - {前::
背景：半径（円で-gradient 0 0、透明、透明に16px、VAR（ - のbackgroundColor）17px）。
右：100％;
}
.TAB- {後::
背景：ラジアル " > -gradient（AT円100％0、透明、透明に16px、VAR（ - のbackgroundColor）17px）。
左：100％;
}
.TAB - a.active {
- のbackgroundColor：TEAL。
色：#FFF;
Z -index：1 。
}
</スタイル>
</ HEAD>
<BODY>
<divのクラス = " タブ-X
<HREF = " "javascript:" クラス = "tab-a">选项卡3 </a>に
は<a href= "javascript:" クラス = "tab-a">选项卡2 </a>の
<HREF = " ジャバスクリプト：" クラス = " タブをアクティブ" >选项卡1 </a>の
</ div>
</ BODY>
</ HTML>
レンダリング：
