纯CSS写成的气泡提示

日期：2012-4-11 来源：GBin1.com

作为前端开发人员，我们都熟悉使用CSS来生成页面上丰富的样式，对于边框border属性来说，也是我们最熟悉不过的CSS属性，今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框，希望大家喜欢！

在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头。

首先我们定义提示框相关属性，我们添加了box阴影和文字阴影效果，这样让提示框更加漂亮：

/* bubble */.tip-bubble {  position: relative;  background-color: #202020;  width: 100px;  padding: 20px;  color: #CCC;  text-align: center;  border-radius: 10px;  margin: 50px;  border: 1px solid #111;  box-shadow: 1px 1px 2px #202020;  -moz-box-shadow: 1px 1px 2px #202020;  -webkit-border-shadow: 1px 1px 2px #202020;  text-shadow: 0px 0px 15px #fff;}

接下来我们处理:after伪标签：

.tip-bubble:after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 15px solid;}

最后我们定义提示框的箭头方向：

HTML 文件内容：

  <h1>Bubble Tips by CSS</h1>

  <div class="tip-bubble tip-bubble-left">GBin1.com Arrow on left </div>

  <div class="tip-bubble tip-bubble-right">GBin1.com Arrow on Right</div>

  <div class="tip-bubble tip-bubble-top">GBin1.com Arrow on top</div>

  <div class="tip-bubble tip-bubble-bottom">GBin1.com  Arrow on bottom</div>?

CSS文件内容：

  /* Layout */
  body{
  font-size:14px;
  font-family:arial;
  background: #CCC;
  }

  #container{
  margin: 0 auto;
  width: 600px;
  padding-top: 10px;
  }

  h1{
  font-size: 28px;
  margin: 50px;
  }

  /* bubble */
  .tip-bubble {
  position: relative;
  background-color: #204020;
  width: 100px;
  padding: 20px;
  color: #CCC;
  text-align: center;
  border-radius: 10px;
  margin: 50px;
  border: 1px solid #111;
  border-shadow: 1px 1px 2px #CCC;
  text-shadow: 0px 0px 5px #404040;
  }

  .tip-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
  }

  /* Position the Arrow */
  .tip-bubble-top:after {
  border-bottom-color: #202020;
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
  }
  .tip-bubble-right:after {
  border-left-color: #202020;
  left: 100%;
  top: 50%;
  margin-top: -15px;
  }

  .tip-bubble-bottom:after {
  border-top-color: #202020;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  }

  .tip-bubble-left:after {
  border-right-color: #202020;
  top: 50%;
  right: 100%;
  margin-top: -15px;
  }?

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。