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

时间 2019-11-10

标签分享一个 css 开发气泡提示栏目 CSS 繁體版

原文原文链接

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

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

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

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

/* 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;
}

...code

...htm

原文来自:分享一个纯CSS开发的气泡式提示框ip