css3圓角tab選項卡代碼

2024-09-05 12:17:00

字體：大中小

供稿：網(wǎng)友

CSS3+jquery實現(xiàn)圓角選項卡，鼠標(biāo)點擊時候才切換的那種選項卡，無圖片修飾，全部代碼寫出來的，基于CSS3技術(shù)，測試請用火狐。IE8下看不到圓角效果。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery+css3圓角tab選項卡切換</title><style>*{margin: 0;padding: 0;}body{font: 14px Georgia, serif;}h1{width: 310px;margin: 0 auto;padding: 20px 0;color: #222;}.group: before,.group: after{content: "";display: table;}.group: after{clear: both;}.group{zoom: 1;}body{background: #222;}#content{background: white;min-height: 400px;}.tabs{list-style: none;margin: 60px auto 0;width: 660px;}.tabs li{float: left;position: relative;}.tabs a{float: left;padding: 10px 40px;text-decoration: none;color: black;background: #ddc385;-webkit-border-top-left-radius: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-topleft: 15px;-moz-border-radius-topright: 15px;border-top-left-radius: 15px;border-top-right-radius: 15px;}.tabs .active{z-index: 3;}.tabs .active a{background: white;color: black;}.tabs li: before, .tabs li: after,.tabs li a: before, .tabs li a: after{position: absolute;bottom: 0;}.tabs li: last-child: after, .tabs li: last-child a: after,.tabs li: first-child: before, .tabs li: first-child a: before,.tabs .active: after, .tabs .active: before,.tabs .active a: after, .tabs .active a: before{content: "";}.tabs .active: before, .tabs .active: after{background: white;z-index: 1;}.tabs li: before, .tabs li: after{background: #ddc385;width: 10px;height: 10px;}.tabs li: before{left: -10px;}.tabs li: after{right: -10px;}.tabs li a: after, .tabs li a: before{width: 20px;height: 20px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background: #222;z-index: 2;}.tabs .active a: after, .tabs .active a: before{background: #ddc385;}.tabs li: first-child.active a: before,.tabs li: last-child.active a: after{background: #222;}.tabs li a: before{left: -20px;}.tabs li a: after{right: -20px;}</style><script src="/ajaxjs/jquery-1.6.2.min.js"></script><script>$(function(){	$("li").click(function(e) {		e.preventDefault();		$("li").removeClass("active");		$(this).addClass("active");	});});</script></head><body>	<ul class="tabs group">	  <li id="iwvjtn8m0"    class="active">One</li> 	  <li>Two</li> 	  <li>Three</li>	  <li>Four</li> 	</ul><div   class="iwvjtn8m0"   id="content"><h1>Round Out Tabs</h1></div></body></html>

上一篇：Div實現(xiàn)表格布局一例

下一篇：CSS Hack最新寫法匯總