html圆角卡片列表,css3圆角tab选项卡代码

jQuery+css3圆角tab选项卡切换

*{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;}

$(function(){

$("li").click(function(e) {

e.preventDefault();

$("li").removeClass("active");

$(this).addClass("active");

});

});

• One
• Two
• Three
• Four

Round Out Tabs