CSS 创建带有箭头和边框的提示框

在本文中，我们将介绍如何使用CSS创建一个带有箭头和边框的提示框。提示框是网页设计中常用的交互元素，常用于显示额外信息或提示用户操作。通过添加箭头和边框，我们可以使提示框更加突出和美观。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

创建提示框的HTML结构

首先，我们需要先创建一个HTML结构来容纳我们的提示框。通常，提示框会被插入到一个特定的容器元素中，例如一个div或者一个span。

<div class="tooltip">
  <span class="tooltiptext">这是一个提示框</span>
</div>

上述代码中，我们使用了一个div作为提示框的容器，内部嵌套了一个span来存放提示框的文本内容。

添加样式

接下来，我们将使用CSS来添加样式并创建一个带有箭头和边框的提示框。我们将使用伪元素::before和::after来实现箭头的效果。

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

上述代码中，我们首先给提示框容器设置了position: relative，这样使得后续绝对定位的元素可以相对于其定位。

然后，我们给提示框内容设置了一些基本样式，包括背景颜色、文字颜色、圆角和内边距。我们将其设置为visibility: hidden，这样默认情况下提示框是不可见的。

接下来，我们使用了伪元素::after来创建箭头。箭头通过设置border-width来控制大小、border-style来确定边框样式、border-color来定义箭头颜色。通过修改边框的宽度和颜色，我们可以调整箭头的形状和颜色。

最后，我们通过使用hover伪类来设置鼠标悬停时提示框的可见性。我们将提示框的visibility属性设置为visible，这样鼠标悬停在提示框容器上时，提示框将显示出来。

示例

现在，让我们来看一个完整的示例，来演示如何创建一个带有箭头和边框的提示框。

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
  <link rel="stylesheet" type="text/https://sotoolbox.com/tag/css target="_blank" rel="nofollow">css" href="styles.https://sotoolbox.com/tag/css target="_blank" rel="nofollow">css">
</head>
<body>

<div class="container">
  <h2>CSS提示框示例</h2>
  <div class="tooltip">
    <span class="tooltiptext">这是一个提示框</span>
    鼠标悬停在这里
  </div>
</div>

</body>
</html>

.container {
  text-align: center;
  padding-top: 50px;
}

.tooltip {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  color: #000;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 130%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

上述代码中，我们定义了一个容器，并将示例的HTML代码放置在其中。我们还通过styles.css文件导入了之前提到的样式。