看到下面的效果了吗？
本来我们站点是用下面的图片做的背景，
但是后期当更改完框中的提示内容，并且更新内容较多的时候，发现内容溢出了，如下图：
但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过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角。（我们觉得可以不用这么做，提示框是直角的也没什么。就看需求了。）
大牛告诉我说：
渐进增强，这个原则下，这样处理是最优的。
后期维护、减少请求数、效率。
这些因素就要靠自己权衡了。
特效的实现还得继续努力加油啊……以后多向大牛们学习学习……