看到下面的效果了吗？
本来我们站点是用下面的图片做的背景，
但是后期当更改完框中的提示内容，并且更新内容较多的时候，发现内容溢出了，如下图：
但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过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>
运行结果如图所示：
这样好处如下：
1. 可以省掉图片，
2. 大小和角标都可以随意控制
3. 位置和大小，颜色一样可以css控制
4. .tip设置为position:absolute，就可自适应内部内容大小；tip加box-shadow，还可以方便增加阴影;用图片做背景，对这些支持就很麻烦了。
但是这种css3的特性，只能适应高级浏览器，IE7及以下版本不支持，他们将显示为直角，而不是圆角，低版本解决办法是：定位4个圆角图片，放到4角。（我们觉得可以不用这么做，提示框是直角的也没什么。就看需求了。）
大牛告诉我说：
渐进增强，这个原则下，这样处理是最优的。
后期维护、减少请求数、效率。
这些因素就要靠自己权衡了。
特效的实现还得继续努力加油啊……以后多向大牛们学习学习……