位置：首页>> 网络编程>> 网页设计>> css2.1实现多重背景和边框效果（4）

css2.1实现多重背景和边框效果（4）

作者：linxz　来源：小志博客　发布时间：2010-06-23 19:02:00　

标签：背景,边框,css

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

第一页上一页 1 2 3

投稿

css2.1实现多重背景和边框效果（4）

猜你喜欢