CSS制作麻将

CSS制作麻将的基本思路

使用CSS制作麻将效果需要结合HTML结构和CSS样式，模拟麻将牌的视觉效果。主要通过边框、阴影、渐变等属性实现立体感，配合伪元素添加细节。

HTML结构设计

麻将牌通常包含牌面数字/符号和背景纹理。HTML结构可采用嵌套div实现：

<div class="mahjong-tile">
  <div class="tile-front">
    <span class="tile-suit">萬</span>
    <span class="tile-number">一</span>
  </div>
</div>

CSS基础样式

.mahjong-tile {
  width: 60px;
  height: 80px;
  position: relative;
  perspective: 1000px;
}

.tile-front {
  width: 100%;
  height: 100%;
  background: #f8e8c0;
  border-radius: 8px;
  border: 2px solid #d4a76a;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

添加立体效果

使用CSS渐变和阴影增强立体感：

.tile-front {
  background: linear-gradient(135deg, #f8e8c0 0%, #e0c090 100%);
  box-shadow: 
    2px 2px 5px rgba(0,0,0,0.2),
    inset 0 0 15px rgba(255,255,255,0.5);
}

.tile-front::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 5px;
  pointer-events: none;
}

牌面内容样式

设计麻将牌的数字/花色样式：

.tile-suit {
  font-size: 24px;
  color: #c00;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.tile-number {
  font-size: 20px;
  color: #333;
  margin-top: 5px;
}

特殊牌型样式

对于不同花色的麻将牌，可通过添加类名改变颜色：

.tile-front.bamboo {
  background: linear-gradient(135deg, #e8f8c0 0%, #c0e090 100%);
}

.tile-front.characters {
  background: linear-gradient(135deg, #c0e8f8 0%, #90c0e0 100%);
}

.tile-front.circles {
  background: linear-gradient(135deg, #f8c0e8 0%, #e090c0 100%);
}

悬停和点击效果

添加交互效果增强真实感：

.mahjong-tile:hover .tile-front {
  transform: translateY(-5px);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

.mahjong-tile:active .tile-front {
  transform: translateY(0);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

背面样式设计

如需显示背面状态，可添加背面样式：

.tile-back {
  width: 100%;
  height: 100%;
  background: #c00;
  border-radius: 8px;
  border: 2px solid #a00;
  position: absolute;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}

.tile-back::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid #fff;
  border-radius: 4px;
}

通过组合这些CSS技术，可以创建出视觉效果逼真的麻将牌。实际项目中可能需要根据具体需求调整尺寸、颜色和细节样式。