CSS制作麻将
CSS 制作麻将牌
使用CSS绘制麻将牌可以通过纯代码实现视觉上的麻将效果，结合HTML和CSS的图形绘制能力。以下是具体实现方法：
基础麻将牌结构
HTML结构通常采用一个容器元素包裹牌面元素，例如：
<div class="mahjong-tile">
<div class="tile-face">一筒</div>
</div>基本样式设置
设置麻将牌的基础样式，包括尺寸、圆角、阴影等：
.mahjong-tile {
width: 60px;
height: 80px;
background: #E8C87C;
border-radius: 5px;
position: relative;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
margin: 10px;
display: inline-block;
}牌面图案实现
不同麻将牌的图案可通过CSS伪元素或背景图实现：
筒子牌（圆形图案）
.tile-face.circles::before {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #D22;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}万子牌（文字+背景）
.tile-face.characters {
font-size: 24px;
color: #000;
text-align: center;
line-height: 80px;
background: linear-gradient(to bottom, #FFF 60%, #FEE 100%);
}高级样式细节
添加细节提升真实感：
.mahjong-tile::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 3px;
pointer-events: none;
}背面样式
实现麻将牌背面效果：
.mahjong-tile.back {
background: #C33;
background-image:
radial-gradient(circle at center, #FFF 0%, transparent 20%),
linear-gradient(45deg, transparent 45%, #FFF 45%, #FFF 55%, transparent 55%);
}动画效果
添加悬停或点击动画：
.mahjong-tile:hover {
transform: translateY(-5px);
box-shadow: 2px 7px 10px rgba(0,0,0,0.3);
transition: all 0.2s ease;
}完整示例组合
将上述代码组合即可创建完整的麻将牌效果。通过调整尺寸、颜色和图案数量，可以生成不同种类的麻将牌。对于复杂图案（如条子牌），建议使用SVG或背景图片实现更精确的控制。
