css2.1实现多重背景和边框效果(4)
作者:linxz 来源:小志博客 时间:2010-06-23 19:02:00
使用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/