无图片纯css实现中国象棋棋子

纯当锻炼前端编程能力了,效果还不错。纯用css不用图片的好处就是加载迅速。代码如下:

<!doctype html>
<head>
<style>
.pieces{
	width:84px;
	height:84px;
	border-radius:50px;
	border:rgb(78,56,23) double 8px;
	background-color:rgb(192,149,106);
	margin:auto;text-align:center;
	font:77px "楷体";
	line-height:84px;text-shadow:0px 0px 2px white;
	box-shadow:3px 3px 2px black;
	float:left;
	margin:10px;
}
.red{color:rgb(144,11,11);border-color:rgb(144,11,11)}
.black{color:rgb(78,56,23)}
</style>
</head>
<body>
	<script>
		var red_names = ['車','馬','炮','帥','仕','相','兵'];
		var black_names = ['车','馬','炮','將','士','象','卒'];
		for (var i = 0;i < red_names.length;++i)
			document.write("<div class='pieces red'>"+red_names[i]+"</div>");
		for (var i = 0;i < black_names.length;++i)
			document.write("<div class='pieces black'>"+black_names[i]+"</div>");
	</script>
	<div class='pieces black'>鞠</div>
	<div class='pieces black'>培</div>
	<div class='pieces black'>中</div>
</body>
效果如下:



你可能感兴趣的:(前端,css)