使用css画一个足球

最新推荐文章于 2026-07-21 05:27:27 发布

原创最新推荐文章于 2026-07-21 05:27:27 发布 · 404 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

在前端开发中，使用纯CSS来画一个足球（或称为英式足球、欧式足球）可能是一个有趣的挑战。足球由多个五边形和六边形组成，因此，我们需要使用一些创意来模拟这种复杂的形状。

下面是一个简单的示例，使用CSS3的特性（如border-radius、linear-gradient和box-shadow）来模拟一个足球的外观。请注意，这是一个简化的示例，可能无法完美地复制真实足球的每一个细节。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Football</title>
<style>
  .football {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, white 40%, black 41%, black 55%, white 56%);
    border-radius: 50%;
    position: relative;
    box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.2),
                inset 5px 5px 10px rgba(255, 255, 255, 0.5);
  }

  .football::before,
  .football::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
  }

  .football::before {
    width: 60px;
    height: 60px;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  .football::after {
    width: 40px;
    height: 40px;
    bottom: 20%;
    left: 70%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
</style>
</head>
<body>
<div class="football"></div>
</body>
</html>