css 制作石头

使用CSS绘制石头效果

通过CSS的border-radius、box-shadow和gradient属性可以模拟石头的自然纹理和不规则形状。

基础形状绘制

.stone {
  width: 150px;
  height: 120px;
  border-radius: 50% 30% 60% 40%/50% 40% 60% 30%;
  background: linear-gradient(135deg, #8b8b8b 20%, #5a5a5a 80%);
}

不规则border-radius值创造非对称轮廓，线性渐变模拟石头的基础色。

添加立体感

.stone {
  box-shadow: 
    inset 5px 5px 10px rgba(255,255,255,0.1),
    inset -5px -5px 10px rgba(0,0,0,0.3),
    5px 5px 15px rgba(0,0,0,0.5);
}

内阴影创造表面凹凸质感，外阴影增强立体效果。

纹理细节增强

.stone::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 40%, 
      rgba(255,255,255,0.1) 5%, 
      transparent 15%),
    radial-gradient(circle at 70% 60%, 
      rgba(0,0,0,0.1) 5%, 
      transparent 15%);
  border-radius: inherit;
}

伪元素叠加径向渐变模拟石头表面的自然斑点纹理。

动画效果（可选）

.stone:hover {
  transform: rotate(5deg) scale(1.05);
  filter: brightness(1.1);
}

悬停时添加微小旋转和亮度变化增强交互感。

完整示例可通过CodePen等平台查看实时渲染效果，调整参数可获得不同风格的石头外观，如花岗岩或鹅卵石等变体。