使用CSS2.1的多重背景效果成品。

示例代码：多边框

多边框的处理方式有很多相类似之处。利用这些方式可以避免使用图片而产生简单的效果。

元素必须具有相对定位属性，并且在需要有填充产生足够的宽度给由伪元素创建的额外的边框。
Copy to clipboard]View Code CSS1
#borders {
 position:relative;
 z-index:1;
 padding:30px;
 border:5px solid #f00;
 background:#ff9600;
}

将伪元素绝对定位在盒子中，并明确与元素盒模型边距之间的距离，设置z-index值为负值后移动到内容层的后面，同时设置你所需要的边框色和背景色。
Copy to clipboard]View Code CSS1
 #borders:before {
 content:"";
 position:absolute;
 z-index:-1;
 top:5px;
 left:5px;
 right:5px;
 bottom:5px;
 border:5px solid #ffea00;
 background:#4aa929;
}
Copy to clipboard]View Code CSS1
 #borders:after {
 content:"";
 position:absolute;
 z-index:-1;
 top:15px;
 left:15px;
 right:15px;
 bottom:15px;
 border:5px solid #00b4ff;
 background:#fff;
}

就是这么简单。一个使用CSS2.1的多边框效果成品就有了。

渐进增强和传统浏览器

IE6和IE7不支持CSS2.1伪元素，将会忽略所有:before和:after声明。它们没有任何增强，但保留着基本的使用习惯。

关于Firefox 3.0的一个警告

Firefox 3.0虽然支持CSS2.1伪元素但不支持其定位。虽然没有支持这部分的效果，但另一些完全不受影响，并且不知道后续的Firefox 3.0版本将会什么时候优化成完美支持这种技术。有时，可以通过定义display:block样式属性可以改进伪元素的外观样式。

使用目前的方式，要求其定位伪元素，建议考虑Firefox 3.0支持的重要性和您的用户目前使用的浏览器比例。

翻译之外的东西，一点点个人看法

这篇文章我不知道是什么时候有的，不过原文后面是对CSS3的属性一些内容，我抛弃了，因为当时看到这篇文章主要是冲着使用CSS2.1的伪对象方式实现效果而去的。当我看到文章中提到用伪对象实现三列等高的时候，我表示十分惊讶，大概分析了一下这样的等高处理方式也存在着一点点小问题，比如背景图片定位（不支持伪对象的浏览器不考虑在内了）。顺带说一下，曾经考虑过在伪对象的content属性中增加图片，但一直以为是不可能实现的，就没尝试了，现在看到了，我也明白了，凡事只有尝试过后才能去确认！

原文：http://blog.linxz.cn/multiple_backgrounds_and_borders_with_css2/

本文链接：http://www.blueidea.com/tech/web/2010/7725.asp　

出处：小志博客
责任编辑：bluehearts

上一页 css2.1实现多重背景和边框效果 [3] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。