返回

用 CSS box-shadow 画个马里奥：简单实现超萌角色！

前端

用 CSS 画马里奥？原来 box-shadow 还有这招！

提到网页上的图像绘制，你会想到什么？Canvas？SVG？还是那些花里胡哨的 CSS 特效？今天，我想向你介绍一种另类的图像绘制方法——使用 CSS 的 box-shadow。

没错，你没听错，就是那个负责给元素添加阴影的 box-shadow。通过巧妙地使用 box-shadow，我们可以轻松绘制出各种各样的图像，包括我们今天要画的马里奥。

1. 马里奥的脑袋

首先，我们先来画马里奥的脑袋。

.mario-head {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  box-shadow: 0 0 10px 0 black;
}

这个 CSS 代码定义了一个红色的圆形，并通过 box-shadow 添加了一个黑色的阴影。这个阴影的效果类似于马里奥帽子下的阴影。

2. 马里奥的眼睛

接下来，我们来画马里奥的眼睛。

.mario-eyes {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}

这个 CSS 代码定义了两个白色的圆形，并通过 position 属性将它们绝对定位在马里奥脑袋上。

3. 马里奥的嘴巴

最后，我们来画马里奥的嘴巴。

.mario-mouth {
  position: absolute;
  top: 40px;
  left: 30px;
  width: 40px;
  height: 10px;
  background-color: black;
  border-radius: 5px;
}

这个 CSS 代码定义了一个黑色的矩形，并通过 position 属性将它绝对定位在马里奥脑袋上。

4. 完成！

现在，我们的马里奥就大功告成了！你可以通过以下代码将它添加到你的 HTML 文档中：

<div class="mario">
  <div class="mario-head"></div>
  <div class="mario-eyes"></div>
  <div class="mario-mouth"></div>
</div>

怎么样，这个用 CSS 画的马里奥是不是既简单又可爱呢？如果你想了解更多关于使用 CSS 绘图的知识，可以参考以下资源：