css3带阴影效果的tab选项卡

内容

11111

222222

33333

4444

初始化css代码。

书写css代码。

ul#navigation { height: 36px; padding: 20px 20px 0 30px; width: 904px; margin: 0 auto; position: relative; overflow: hidden; }

ul#navigation li { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; float: left; width: 168px; margin: 0 10px 0 0; background-color: #2B477D; border: solid 1px #415F9D; position: relative; z-index: 1; }

ul#navigation li.selected { z-index: 3; }

ul#navigation li.shadow { width: 100%; height: 2px; position: absolute; bottom: -3px; left: 0; border: none; background: none; z-index: 2; -webkit-box-shadow: #111 0 -2px 6px; -moz-box-shadow: #111 0 -2px 6px; box-shadow: #111 0 -2px 6px; }

ul#navigation li a:link, ul#navigation li a:visited { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; display: block; text-align: center; width: 168px; height: 40px; line-height: 36px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; font-size: 13px; font-weight: bold; color: #fff; letter-spacing: 1px; outline: none; float: left; background: #2B477D; -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; }

ul#navigation li a:hover { background-color: #5a87dd; }

ul#navigation li.selected a:link, ul#navigation li.selected a:visited { color: #2B477D; border: solid 1px #fff; -webkit-transition: background-color 0.2s linear; background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2; background: -webkit-gradient(linear, left bottom, left top, color-stop(.2, #f2f2f2), color-stop(.8, #d1d1d1)); background-color: #f2f2f2; }

#content { width: 910px; background: #f2f2f2; padding: 0 0 50px 0; margin: 0 auto; }

书写并添加js代码。

代码整体结构。

查看效果。