看到下面的效果了嗎？
本來我們站點是用下面的圖片做的背景，
但是后期當更改完框中的提示內容，並且更新內容較多的時候，發現內容溢出了，如下圖：
但是背景圖片不能自動拉伸，還得重新做一張背景圖，這樣就導致沒更新一次信息就得重新繪制一張背景圖，經過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角。（我們覺得可以不用這么做，提示框是直角的也沒什么。就看需求了。）
大牛告訴我說：
漸進增強，這個原則下，這樣處理是最優的。
后期維護、減少請求數、效率。
這些因素就要靠自己權衡了。
特效的實現還得繼續努力加油啊……以后多向大牛們學習學習……