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或背景图片实现更精确的控制。