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

最新推荐文章于 2023-12-25 14:55:43 发布

jupeizhong

最新推荐文章于 2023-12-25 14:55:43 发布

阅读量1.7k

点赞数 3

分类专栏： web 文章标签： css 前端

本文链接：https://blog.csdn.net/jupeizhong/article/details/50664066

版权

这篇博客展示了如何仅使用CSS技术，不依赖图片，来实现中国象棋棋子的前端展示。通过这种方式，可以提升页面加载速度。文中包含实现这一效果的CSS代码。

摘要由CSDN通过智能技术生成

纯当锻炼前端编程能力了，效果还不错。纯用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