css 制作石头

使用CSS制作石头效果

通过CSS的border-radius、box-shadow和background属性可以模拟石头的自然外观。以下是一个简单实现：

<div class="stone"></div>

.stone {
  width: 100px;
  height: 80px;
  background: linear-gradient(135deg, #a3a3a3 0%, #7a7a7a 50%, #5a5a5a 100%);
  border-radius: 50% 30% 60% 40%/40% 50% 30% 60%;
  box-shadow: 
    5px 5px 10px rgba(0,0,0,0.3),
    inset 2px 2px 5px rgba(255,255,255,0.2);
  transform: rotate(15deg);
}

添加纹理细节

通过伪元素增加石头表面的凹凸纹理：

.stone::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 20%;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  top: 20%;
  left: 30%;
  filter: blur(1px);
}

动画效果（可选）

添加悬浮动画模拟石头重量感：

.stone:hover {
  transform: rotate(15deg) translateY(-5px);
  box-shadow: 
    8px 8px 15px rgba(0,0,0,0.4),
    inset 2px 2px 5px rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

多石头组合

创建不同形状的石头群组：

.stone-group {
  display: flex;
  gap: 15px;
}
.stone-variant {
  width: 60px;
  height: 50px;
  border-radius: 40% 60% 30% 70%/50% 40% 60% 50%;
  background: linear-gradient(45deg, #8b8b8b, #636363);
}

关键技巧：

• 使用不对称的border-radius值创造不规则形状
• 渐变颜色模拟石头矿物质感
• 内阴影和外阴影组合增加立体感
• 通过伪元素添加表面细节纹理