好看的标题一

<!DOCTYPE html>
 	<html lang="en">
 	<head>
 	<meta charset="UTF-8">
 	<title>Title</title>
 	<style>
 	.box{
 	margin:100px auto;
 	height:500px;
 	width:500px;
 /*	border:1px solid #000;*/
 	/* 配置3d环境*/
 	transform-style:preserve-3d;
 	transform: rotateX(10deg) rotateY(10deg);
 	}
 	.box div{
 	height:400px;
 	width:400px;
 	position:absolute;
 	left:0;
 	top:0;
 	/*opacity:.9;*/
 	}
 	.box .top{
 	background-color:#ff9c23;
 	transform:rotateX(90deg) translateZ(-200px);
 	}
 	.box .bottom{
 	background-color:green;
 	transform:rotateX(90deg) translateZ(200px);
 	}
 	.box .left{
 	background-color:#5cadff;
 	transform:rotateY(90deg) translateZ(200px);
 	}
 	.box .right{
 	background-color:red;
 	transform:rotateY(90deg) translateZ(-200px);
 	}
 	.box .before{
 	background-color:pink;
 	transform:translateZ(200px);
 	}
 	.box .after{
 	background-color:yellow;
 	transform:translateZ(-200px);
 	}
 	table{
 		border-top: #CCCCCC solid 7px;
        border-left: #CCCCCC solid 7px;
        border-right: #F0AD4E solid 7px;
        border-bottom: #F0AD4E solid 7px;
 	}
 	td{
 		border-top: #CCCCCC  solid 10px;
        border-left: #CCCCCC solid 10px;
        border-right: #F3F3F3 solid 10px;
        border-bottom:  #F3F3F3 solid 10px;
 	}
 	</style>
 	</head>
 	<body>
 	<div class="box"> 
 	<div class="top"></div>
 	<div class="bottom"></div> 
 	<div class="left"></div>
 	<div class="right"></div> 
 	<div class="before">
 		<p align="center" style="font-size: 92px;padding-top: 60px;">贰</p>
 	</div>
 	<div class="after"></div> 
 	</div>	 
 	</body>
 	</html>
猜你喜欢
