无图片纯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>效果如下：
