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

css实现立体标签效果代码

代码语言：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);
	back.........完整代码请登录后点击上方下载按钮下载查看