如何用CSS 2.1实现多重背景和边框效果？

使用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/