css实现立体标签效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现立体标签效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700'>
<style>
* {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
html {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-size:62.5%;
	height:100%;
}
body {
	font:normal 16px 'Open Sans',sans-serif;
	padding:4rem;
}
.tags {
	list-style:none;
	padding:0;
	margin:0;
}
.tag {
	color:#737373;
	background:#cccccc;
	-moz-box-shadow:0 4px 0 0 #b3b3b3,4px 4px 0 0 #b3b3b3;
	-webkit-box-shadow:0 4px 0 0 #b3b3b3,4px 4px 0 0 #b3b3b3;
	box-shadow:0 4px 0 0 #b3b3b3,4px 4px 0 0 #b3b3b3;
	display:inline-block;
	font:normal normal normal 14px/12px 'Open Sans',sans-serif;
	height:30px;
	margin:0 2rem 1rem 0;
	padding:1rem 2.8rem 1rem 2rem;
	position:relative;
	top:0;
	content:"";
	cursor:pointer;
	text-align:center;
	text-transform:lowercase;
	border:0 solid transparent;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.tag:before {
	color:rgba(255,255,255,0.9);
	background:#cccccc;
	-moz-box-shadow:0 4px 0 0 #b3b3b3;
	-webkit-box-shadow:0 4px 0 0 #b3b3b3;
	box-shadow:0 4px 0 0 #b3b3b3;
	display:inline-block;
	width:22px;
	height:22px;
	position:absolute;
	top:4px;
	right:-12px;
	z-index:1;
	content:"";
	cursor:pointer;
	-moz-transform:rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
	-ms-transform:rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
	-o-transform:rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
	-webkit-transform:rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
	transform:rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.tag:hover:before {
	background:#d9d9d9;
}
.tag:active:before {
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}
.tag:after {
	display:inline-block;
	background:#FFF;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:3px 3px 0 0 #b3b3b3 inset;
	-webkit-box-shadow:3px 3px 0 0 #b3b3b3 inset;
	box-shadow:3px 3px 0 0 #b3b3b3 inset;
	width:8px;
	height:8px;
	position:absolute;
	top:12px;
	right:0;
	z-index:2;
	content:"";
	cursor:pointer;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.tag:active:after {
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}
.tag:hover {
	background:#d9d9d9;
	-moz-transform:scale(1.03,1.03);
	-ms-transform:scale(1.03,1.03);
	-o-transform:scale(1.03,1.03);
	-webkit-transform:scale(1.03,1.03);
	transform:scale(1.03,1.03);
}
.tag:active {
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	top:4px;
}
.tag span {
	position:relative;
	z-index:2;
}
.tag span.num {
	display:block;
	color:#bfbfbf;
	position:absolute;
	top:0;
	left:0;
	margin:0;
	font:bold 50px/28px 'Open Sans',sans-serif;
	letter-spacing:-6px;
	overflow:hidden;
	height:30px;
	width:100%;
	text-align:left;
	z-index:1;
}
/* Rounded Tag */.tag-round {
	-moz-border-radius:4px 1px 1px 4px;
	-webkit-border-radius:4px;
	border-radius:4px 1px 1px 4px;
}
.tag-round:before {
	-moz-border-radius:1px 1px 4px;
	-webkit-border-radius:1px;
	border-radius:1px 1px 4px;
}
/* Colors */.tag-aqua {
	color:#072520;
	background:#28d0b3;
	-moz-box-shadow:0 4px 0 0 #20a58e,4px 4px 0 0 #20a58e;
	-webkit-box-shadow:0 4px 0 0 #20a58e,4px 4px 0 0 #20a58e;
	box-shadow:0 4px 0 0 #20a58e,4px 4px 0 0 #20a58e;
}
.tag-aqua:before {
	background:#28d0b3;
	-moz-box-shadow:0 4px 0 0 #20a58e;
	-webkit-box-shadow:0 4px 0 0 #20a58e;
	box-shadow:0 4px 0 0 #2.........完整代码请登录后点击上方下载按钮下载查看