css3技术

CSS制作网页气泡状文本框_div+css教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-19 17:00 我要评论( )

.bubble:after{ display:block; border-style:solid; border-width:15px; border-color:#f3961c transparent transparent transparent; } 这时,已经可以看见这个三角形了(其实是一个上边框)。 第六步,指定空元

  .bubble:after{
    display:block;
    border-style:solid;
    border-width:15px;
    border-color:#f3961c transparent transparent transparent;
  }

 

这时,已经可以看见这个三角形了(其实是一个上边框)。

第六步,指定空元素的定位方式为absolute。然后,以容器元素的左下角为基点,将空元素水平右移一定的距离(这里是50像素),再垂直下移两个边界的距离。(由于第五步将空元素的边界设为15像素,所以这里就是下移30像素。)

 

  .bubble:after{
    position:absolute;
    z-index:-1;
    bottom:-30px;
    left:50px;
  }

 

至此,一个不需要任何背景图片和多余标签的气泡框,就出现在我们眼前了。

灵活处理空元素的边框,或者改变大小,或者生成圆角,或者将两个空元素的边框重叠,就会产生各种各样的变化。具体的效果和代码,请参考Nicolas Gallagher的范例页。

 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
"