CSS设计网页教程:制作网页气泡状文本框

作者佚名技术来源 CSS技术浏览发布时间 2012-02-25

气泡框就生成了。

这种方法的优点是所有浏览器都支持，缺点是比较麻烦，必须制作专门的图片，增加多余的标签，代码的灵活性较小。

============================

随着CSS3的出现，现在有了更好的方法，不需要任何背景图片和多余的标签，就能生成漂亮的文本框。

请看新方法发明人Nicolas Gallagher制作的范例：

CSS设计网页教程:制作网页气泡状文本框

由于这种方法用到了CSS3，所以IE6不支持，IE7和IE8无法显示圆角效果。其他浏览器的最新版本，都能够正常显示。

还是以前面的代码为例。

　　<blockquote class="bubble">床前明月光，疑是地上霜。</blockquote>

第一步，生成基本的方框。

　　.bubble{
　　　　position:relative;
　　　　padding:15px;
　　　　margin:1em 0em 3em;
　　　　width:300px;
　　　　line-height:1.2;
　　　　text-align:center;
　　　　color:#fff;
　　　　background:#075698;
　　}

CSS设计网页教程:制作网页气泡状文本框

第二步，生成圆角。

　　.bubble{
　　　　-moz-border-radius:10px;
　　　　-webkit-border-radius:10px;
　　　　border-radius:10px;
　　}

CSS设计网页教程:制作网页气泡状文本框

第三步，制作线性渐变的效果。

　　.bubble{
　　　　background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
　　　　background:-moz-linear-gradient(top, #f9d835, #f3961c);
　　　　background:-o-linear-gradient(top, #f9d835, #f3961c);
　　　　background:linear-gradient(top, #f9d835, #f3961c);
　　}

CSS设计网页教程:制作网页气泡状文本框

第四步，在容器后面添加一个空元素，并将长度和宽度都设为0。

　　.bubble:after {
　　　　content:"\00a0";
　　　　width:0;
　　　　height:0;
　　}

第五步，指定这个空元素为块级元素，并且四个边框之中，只显示上方的边框，其他三个边框，都设为透明。因为该元素的大小为0，所以它的每一个边框，都是一个等腰三角形。

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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: css3阴影属性box-shadow注意事项下一篇: 控制first-letter伪类的背景

关于CSS设计网页教程:制作网页气泡状文本框的所有评论

随机推荐