html+css创建提示框

看到下面的效果了吗?

html+css创建提示框

本来我们站点是用下面的图片做的背景,

html+css创建提示框

但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图:

html+css创建提示框

但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致没更新一次信息就得重新绘制一张背景图,经过qq网名为虫子²º¹³的大牛指点,用html + css,但不使用背景图片,同样做出了这种效果,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
<!--body{padding:100px;}-->
<!--.tip{position: relative;padding:50px;border:1px solid #000;border-radius: 10px;}-->
.tip{position: absolute;padding:50px;border:1px solid #000;border-radius: 10px;}
.angle{width: 20px;height: 20px;line-height: 20px;overflow:hidden;font-size:20px;position: absolute;font-family:"SimSun";bottom:45px;left:-11px;}
.angle i{position: absolute;top:0;left:0;font-style: normal;}
.angle .b{color:#000;z-index: 1;}
.angle .t{color:#fff;z-index: 2;left:2px;}
</style>
<body>
<div class="tip">
<span class="angle">
<i class="b">◆</i>
<i class="t">◆</i>
</span>
<p> 版本号:v2.0.8大小:6.70M更新日期:14-08-27 15:37 </p>
<p> 更新描述:优化了几个bug; </p>
<p><button>下载SDK包</button></p>
</div>
</body>
</html>

运行结果如图所示:

html+css创建提示框

这样好处如下:

1. 可以省掉图片,

2. 大小和角标都可以随意控制

3. 位置和大小,颜色一样可以css控制

4. .tip设置为position:absolute,就可自适应内部内容大小;tip加box-shadow,还可以方便增加阴影;用图片做背景,对这些支持就很麻烦了。

但是这种css3的特性,只能适应高级浏览器,IE7及以下版本不支持,他们将显示为直角,而不是圆角,低版本解决办法是:定位4个圆角图片,放到4角。(我们觉得可以不用这么做,提示框是直角的也没什么。就看需求了。)

大牛告诉我说:

渐进增强,这个原则下,这样处理是最优的。
后期维护、减少请求数、效率。
这些因素就要靠自己权衡了。

特效的实现还得继续努力加油啊……以后多向大牛们学习学习……

上一篇:Tip提示框另类写法


下一篇:纯CSS实现tooltip提示框,CSS箭头及形状