|
[tr][td]
图片：150751ckkc6cbrvci9xvgv.jpg  作为前端开发人员，我们都熟悉使用CSS来生成页面上丰富的样式，对于边框border属性来说，也是我们最熟悉不过的CSS属性，今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框，希望大家喜欢！ Demo下载： 图片：150751ckkc6cbrvci9xvgv.jpg 分享一个纯CSS开发的气泡式提示框.zip在这篇文章中我们将使用: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; [*]} 复制代码 以上定义了顶端的箭头方向，其它的代码类似。是不是很简单，希望大家喜欢！ [/td][/tr] |
|
