CSS3实现灵动气泡框和内凹圆角

在网页设计中，气泡框和内凹圆角都是常见的元素，它们可以使页面更加美观，用户界面更加友好。使用CSS3技术，我们可以轻松实现这些效果。

气泡框

气泡框通常用于显示提示信息或帮助信息。我们可以使用伪元素::before和::after来实现气泡框的小三角形。HTML代码如下：

<div class="tooltip">
  <span>提示信息</span>
</div>

CSS代码如下：

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

.tooltip span {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
}

.tooltip:hover span {
  opacity: 1;
  visibility: visible;
}

.tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-width: 4px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

内凹圆角

内凹圆角可以使元素看起来更加柔和。我们可以使用CSS3的border-radius属性来实现内凹圆角。HTML代码如下：

<div class="box">
  <p>内容</p>
</div>

CSS代码如下：

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
}

.box p {
  padding: 20px;
}

通过使用CSS3技术，我们可以轻松实现气泡框和内凹圆角效果，让我们的页面更加美观，用户界面更加友好。