Css3气泡框

第一步,生成基本的方框。
第二步,生成圆角。
第三步,制作线性渐变的效果。
第四步,在容器后面添加一个空元素,并将长度和宽度都设为0。
第五步,指定这个空元素为块级元素,并且四个边框之中,只显示上方的边框,其他三个边框,都设为透明。因为该元素的大小为0,所以它的每一个边框,都是一个等腰三角形。
第六步,指定空元素的定位方式为absolute。然后,以容器元素的左下角为基点,将空元素水平右移一定的距离(这里是50像素),再垂直下移两个边界的距离。(由于第五步将空元素的边界设为15像素,所以这里就是下移30像素。)
至此,一个不需要任何背景图片和多余标签的气泡框,就出现在我们眼前了。
这里写图片描述
参考实例:bubble.html
灵活处理空元素的边框,或者改变大小,或者生成圆角,或者将两个空元素的边框重叠,就会产生各种各样的变化。具体的效果和代码,请参考Nicolas Gallagher的范例页。

猜你喜欢

转载自blog.csdn.net/cuishizun/article/details/82589785