分享一个纯CSS开发的气泡式提示框

  • A+
所属分类:DIV+CSS

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

Demo下载:

在这篇文章中我们将使用: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;
    }

复制代码
最后我们定义提示框的箭头方向:

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

复制代码
以上定义了顶端的箭头方向,其它的代码类似。是不是很简单,希望大家喜欢!

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: