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

这篇博客展示了如何仅使用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 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值