/* 泡泡及小三角
------------------------------------------ */
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
/* 这里是用CSS3来控制圆角和渐变效果 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* 创建三角形（译者：请注意这里，这里就是在控制伪类所创建的DOM元素） */
.triangle-isosceles:after {
content:"0a0";
display:block; /* 针对 FF3.0 */
position:absolute;
z-index:-1;
bottom:-30px;
left:50px;
width:0;
height:0;
border-width:15px 15px;
border-style:solid;
border-color:#f3961c transparent transparent;
}
一些说明：
本方法是一个渐进增强的过程。首先是创建一个简单的层，然后是用伪类来实现泡泡的“小三角”，然后用CSS3来实现圆角及渐变背景。层、 伪类、圆角、渐变背景这四个特性会根据浏览器的渲染能力而有不同的体验。
所以，不充分支持CSS2.1（如IE6和IE7）或不充分支持的CSS3（如IE8）的浏览器，他们将无法让用户体验到出最好的效果。
关于Firefox3.0的提示：
FF3.0支持的CSS2.1的伪类生成的DOM，但不支持对生成的元素的定位。DEMO中的一些例子我认为在FF3.0中是不能接受的，即FF3.0不 能处理最基本的聊天泡泡。根据NetApplications公司2010年3月的统计，FF3.0浏览器目前约有2％〜4％的市场份额。所以应用本技术 之前，应该考虑FF3.0在你的访问者中的重要性。不过，最终它将成为一种罕见的浏览器。但对于FF3.0本文中的技术没有更好的支持方 案。
2/2 首页 上一页 1 2
