CSS基础教程——纯CSS开发的气泡式提示框

发布时间:2020-07-27 11:55:02 作者:zhanyingwang
来源:网络 阅读:414

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 纯CSS开发的气泡式提示框
 作为前端开发人员,我们都熟悉使用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;
}复制代码
最后我们定义提示框的箭头方向:

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

点击进入CSS强化教程

推荐阅读:
  1. 用纯CSS实现语音聊天气泡框效果的方法
  2. 纯css的滑块如何建立

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html css js

上一篇:调节spyder中字体的方法

下一篇:如何解决php alert乱码的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》