css样式贪图蛇的编写,css 文本气泡样式

好的，我来为你解答。

首先是贪图蛇的CSS样式：

HTML 结构：

<div class="snake">
  <div class="head"></div>
  <div class="body"></div>
  <div class="tail"></div>
</div>

CSS 样式：

.snake {
  position: relative;
  width: 50px;
  height: 50px;
}

.head,
.body,
.tail {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: green;
}

.head {
  top: 0;
  left: 0;
}

.body {
  top: 20px;
  left: 0;
}

.tail {
  top: 40px;
  left: 0;
}

然后是文本气泡样式：

HTML 结构：

<div class="bubble">
  <div class="content">
    <p>这里是文本内容</p>
  </div>
</div>

CSS 样式：

.bubble {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.bubble:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #fff;
}

.content {
  position: relative;
  z-index: 1;
}

以上就是贪图蛇与文本气泡的CSS样式。希望对你有所帮助！